精华内容
下载资源
问答
  • 用showdown给HTML网页插入markdown笔记

    千次阅读 2018-03-26 21:41:25
    本文的目的是给个人创建的blog网站增加markdown博文的解析与显示功能 环境 windows10 pycharm2017.3.3 professional edition python3.6.4 django2.0.2 方法 下载showdown.js,下载完成后,将文件里的...

    前言

    本文的目的是给个人创建的blog网站增加markdown博文的解析与显示功能

    环境

    1. windows10
    2. pycharm2017.3.3 professional edition
    3. python3.6.4
    4. django2.0.2

    方法

    1. 下载showdown.js,下载完成后,将文件里的showdown.js文件放到项目内对应js目录下,目录请根据自己的项目自行调整。
    2. 在引入之前下载的showdown.js文件,比如

      <script src="/static/js/showdown.min.js"></script>
    3. 根据官方提供的例子,在HTML页面里解析markdown语言的方法如下

      <p id="output">test</p>
      <script>
          var converter = new showdown.Converter(),
              text = "# title",
              html = converter.makeHtml(text);
          document.getElementById('output').innerHTML = html;
      </script>

      其结果是将text内的markdown语言转化成HTML语言病替换到test的位置

    4. 但是一般我们不会将大片的markdown笔记直接放入HTML文件中,如果我们的数据是放在数据库里的,那么就需要改变获取数据的方式,方法如下:
      首先,需要定义需要从数据库获取文档

      <p id="content" class="hide">{{ blog.content}}</p>

      其次,就是让js程序读取文档

      text = document.getElementById('content').innerText

      最终结果就是

      <p id="content" class="hide">{{ blog.content }}</p>
      <p id="output">test</p>
      <script>
          var converter = new showdown.Converter(),
              text = document.getElementById('content').innerText,
              html = converter.makeHtml(text);
          document.getElementById('output').innerHTML = html;
      </script>
    展开全文
  • 网页中加入markdown编辑器

    万次阅读 2018-09-14 09:52:32
    [说明]使用mditor插件可以把markdown文本转化成html 第一步: 引入 Mditor 样式文件 &lt;link rel="stylesheet" href="your-path/dist/css/mditor.min.css" /&gt; 引用 Mditor 脚本...

    在浏览器集成 Mditor?

    [说明]使用mditor插件可以把markdown文本转化成html

    第一步:
    引入 Mditor 样式文件

    <link rel="stylesheet" href="your-path/dist/css/mditor.min.css" />

    引用 Mditor 脚本文件

    <script src="your-path/dist/js/mditor.min.js"></script>

    当然,也可以使用 CDN 资源

    <link rel="stylesheet" href="https://unpkg.com/mditor@1.0.5/dist/css/mditor.min.css" />
    
    <script src="https://unpkg.com/mditor@1.0.5/dist/js/mditor.min.js"></script>


    第二步:
    添加 textarea 元素

    <textarea name="editor" id="editor"></textarea>

    创建 Mditor 实例

    var mditor =  Mditor.fromTextarea(document.getElementById('editor'));

    参考地址:https://www.npmjs.com/package/mditor

    在node中使用

    1.安装

    npm i mditor -s

    2.导入

     const mditor=require('mditor')

    3.在需要渲染的页面中加入

    var mditor =  Mditor.fromTextarea(document.getElementById('editor'));
    

    从数据库读出时,可以使用marked方法把markdown文本转化成html

     const html = marked(result[0].content)
    展开全文
  • 给自己的网页添加MarkDown编辑器

    千次阅读 2020-07-06 23:48:32
    对于程序员来说,使用MarkDown编辑器远远比使用word等编辑器好,统一自然、代码高亮等特点已经成为了程序员的必备编辑器。 那么如何使自己开发的页面也具备markdown编辑器的功能呢? 下载与安装 1.下载开源的编辑器...

    对于程序员来说,使用MarkDown编辑器远远比使用word等编辑器好,统一自然、代码高亮等特点已经成为了程序员的必备编辑器。

    那么如何使自己开发的页面也具备markdown编辑器的功能呢?

    需要看效果的,可以到我自己的个人博客查看:palewl.cn

    下载与安装

    1.下载开源的编辑器插件 Markdown.zip
    方法一:官网下载:https://pandao.github.io/editor.md/ —速度有点慢,有点难下载

    方法二:百度网盘 https://pan.baidu.com/s/1JzoQR17zopU9t7Jq7XWvvg 提取码:qdlz —推荐√ 速度虽然慢,但是还是可以下载的

    2.解压文件,并复制到你自己的项目中去。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    3.在你需要markdown功能的页面引入css和js
    在这里插入图片描述
    在这里插入图片描述需要注意的是,markdowm需要jq的支持,所以也需要引入jq文件。

    4.markdowm其实就是一种文本编辑器,比如我们做个人博客的时候,发布文章一般都有标题、内容

    两个框,markdown就是要放在内容框里面展示的。

    4.1将textarea文本框定义在一个新的div区,id为:md-content.如图
    在这里插入图片描述

    4.2 复制以下js代码到前面,注意要在jq和editormd.min.js的后面。

    var contentEditor;
    
    $(function() {
        contentEditor = editormd("md-content", {
            width   : "100%",
            height  : 640,
            syncScrolling : "single",
            path    : "../static/lib/editormd/lib/"
        });
    });
    

    也可以将代码放在专门的js文件里,引入即可。

    在这里插入图片描述

    至此,大功告成。
    在这里插入图片描述在这里插入图片描述

    展开全文
  • Markdown 插入视频

    千次阅读 2020-11-28 15:17:15
    Markdown 视频 由于 Markdown 支持 HTML 语法,会对相应的标签进行解析。所以我们可以通过 HTML 语法将视频放入到我们的 Markdown 中。 用法如下: <iframe height=498 width=510 src="视频地址"> 其中 ...

    Markdown 视频

    由于 Markdown 支持 HTML 语法,会对相应的标签进行解析。所以我们可以通过 HTML 语法将视频放入到我们的 Markdown 中。

    用法如下:

    <iframe height=498 width=510 src="视频地址">
    

    其中 heightwidth 是 HTML 中的属性可以设置视频的大小,我们也可以使用 HTML 中的其他属性对插入视频进行相应设置。

    本地插入

    src 中加入本地视频所对应的路径即可。

    <iframe height=498 width=510 src="本地视频路径">
    

    在线插入

    src 中加入视频链接即可。

    <iframe height=498 width=510 src="在线视频链接">
    

    在这里提供一种方法,在我们没有服务器的情况下,让本地视频获取在线链接:

    以网易云为例:

    1. 我们需要插入的视频:
      https://gitee.com/project_almanac/change/raw/master/Aesthetics/rjGfGz4azb64.png

    2. 进入网易云的创作中心发布本地视频

    3. 找到我们发布的视频

    4. 将网页链接插入即可

    5. 这样获取整个页面肯定不太舒服,我们还可以通过开发者工具,找到单独的视频链接

    <iframe height=498 width=510 src="http://vodkgeyttp9.vod.126.net/cloudmusic/1FgSA8LX_3222439799_sd.mp4?wsSecret=25dc3b1d0e2fcc4c65db0cab7d6f107d&wsTime=1606454043">
    

    上述方法我们利用其他平台发布视频进行获取链接都是有效的。

    展开全文
  • 但是怎么插入Markdown编辑器呢? 首先,要下载有关文件。 点此下载 下载完成后,解压缩并从以下路径提取出: editor.md-develop\examples\css\style.css editor.md-develop\css\editormd.css editor.md-develop\...
  • 【分享】Markdown插入图片的三种方式

    千次阅读 2020-05-22 17:48:42
    插入图片通常使用用链接的方式,或是本地图片路径,或是网页图片路径。 本地图片路径在与团队共享markdown文件时,会无法显示图片,或者需要将markdown转换成PDF再分享,这又会造成不方便编辑的情况。 网络图片...
  • 如何使用markdown插入图片

    千次阅读 2019-03-22 22:00:57
    4.获取链接,把链接加入你的markdown编辑中,就能看到图片了~ 注:图片有效期我不知道,今天才第一次用 主要是百度图片不能上传其他的方法不是要下软件就是要买会员,烦Xp 举个栗子 死宅真恶心Xp ...
  • showdown是一个Javascript标记到HTML转换器,将markdown文本转换为HTML,基于John Gruber的原始作品。showdown可以使用在客户端(在浏览器中)或服务器端(使用NodeJs)。 它比较适用于个人博客,在线下将笔记或者其他...
  • 小白都能看得懂的教程 一本教你如何在前端实现markdown编辑器 大家好,我叫亓官劼(qí guān jié ) ,在博客中记录学习的点滴历程,一起加油~ 博客文章内容导航(实时更新) 更多优质文章推荐: 小白都能看懂的...
  • CSDN MarkDown图片插入及设置

    千次阅读 2020-04-30 15:10:45
      当我们利用CSDN MarkDown进行博客撰写的时候,需要上传图片,上传图片之后会有字符串,并且会发现小图片和上传大图片上传之后显示的字符串不一致,今天就来仔细地聊聊这些字符串以及含义。 小图像居中   直接...
  • 如何优雅的在Markdown插入公式

    千次阅读 2020-06-21 21:12:12
    Markdown文本以其简洁美观的编排界面而受到诸多同学的喜欢,而对于很多理工科同学来说,想要在Markdown文件中插入自己想要的公式却要费一些功夫。本文介绍一种自己常用地插入公式的方法,希望能够对您有所帮助。 ...
  • Markdown生成的网页文件中,嵌入本地的图片。这样不管复制到哪里都可以使用了。本资源中有源码和可执行程序。
  • MarkDown插入视频,插入gif

    万次阅读 2016-05-13 11:28:04
    插入视频代码:iframe height=498 width=510 src="http://player.youku.com/embed/XNjcyMDU4Njg0"> 插入gif代码:
  • markdown中使用iframe 嵌套网页

    千次阅读 2019-11-20 21:57:33
    <iframe height=850 width=90% src="http://mctool.wangmingchang.com/index/jspay/dashang" frameborder=0 allowfullscreen> </iframe>  更多精彩文章请关注 王明昌博客 ......
  • markdown插入 html 视频

    千次阅读 2018-12-22 10:05:17
    插入腾讯视频: 首先在网页下打开腾讯视频,找到自己要添加的视频...粘贴在markdown中,然后插入设置的画面大小就可以了(大小可以自定义的): width="670px" height="442px" 效果: ...
  • 如何在禅道或者网页使用MarkDown样式

    千次阅读 2017-07-20 11:51:45
    一、我的做法如下:1、先在csdn里面用markdown来编辑要发布的文章;这里写有个好处,实时对照样式,还可以查看帮助,还有很多快捷键可以使用。例如: Ctrl+k:快速添加代码:I am test code !Ctrl+g:快速插入图片...
  • MarkDown的表格中插入代码

    千次阅读 2020-11-28 15:52:20
    MarkDown的表格中插入代码是个不仅仅看MarkDown脸色的问题,还得看网页的解析的脸色。我用如下两种方式在别的网站可以成功插入且正常显示(可以换行,可以显示出代码样式),但在CSDN就不大行,如下所示。如果你是...
  • markdown语法及插入图片、链接、公式

    千次阅读 2017-03-10 15:07:42
    markdown 数学公式 LaTeX 语法
  • 网上有教程提到,要把表格上传到一个在线格式转换网站,其实没必要这么复杂,简单几步搞定。 首先用Excel创建表格,上方不要留空行,左侧不要留空列。... 之间的内容,粘贴到 markdown编辑器就可以啦。 ...
  • 使用相对路径插入图片。比如你把一个叫做1.png的图片和...应该所有markdown软件都支持这种语法吧,我用过的Mou ,macDown,Visual Studio Code等等是支持这种写法的。最大的优点就是不需要网络,做到本地存放图片。 ...
  • markdown插入数学公式(全)

    万次阅读 2018-11-18 21:05:45
    使用了一段时间的markdown编辑以后,开始要学着加入数学公式在markdown的编辑文档中,因此专门在网上找了一些方法。所以有新的发现会更新,大家有补充的可以...在需要插入公式的位置键入如下代码,并在“在此插入Lat...
  • markdown文档中插入emoji表情的方法

    万次阅读 多人点赞 2018-10-03 06:29:43
    今天突然发现markdown文档中竟然可以插入一些emoji表情了!
  • 自己写一个网页版的Markdown实时编辑:器http://blog.csdn.net/Marksinoberg/article/details/51648929我自己写的Markdown实时编辑; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE ht
  • Markdown】用 Markdown 代码写出好看的页面

    千次阅读 多人点赞 2020-04-15 09:25:41
    作为一个学习计算机相关知识的人,如果不经常写博客,就容易把刚学到的知识忘记,写博客是一个很好的学习习惯,而写好博客也就是要学会熟练使用Markdown,这样可以很好地使我们的博客页面变得更加美观,这篇文章介绍...
  • html内嵌markdown

    万次阅读 2018-03-22 14:08:29
    1.创建spring boot工程 pom里添加 thymeleaf和web依赖 <!--thymeleaf--> org.springframework.boot ...spring-boot-starter-thymeleaf ...2.关于markdown转换成html,网上已经有开源的js库了,...加入markdown代码:

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,990
精华内容 2,396
关键字:

网页插入markdown