前言
 
本文的目的是给个人创建的blog网站增加markdown博文的解析与显示功能
 
环境
 
windows10
pycharm2017.3.3 professional edition
python3.6.4
django2.0.2
 
方法
 
下载showdown.js，下载完成后，将文件里的showdown.js文件放到项目内对应js目录下，目录请根据自己的项目自行调整。
在引入之前下载的showdown.js文件，比如
 
<script src="/static/js/showdown.min.js"></script>
根据官方提供的例子，在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的位置
但是一般我们不会将大片的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>

在浏览器集成 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编辑器远远比使用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 视频
 
由于 Markdown 支持 HTML 语法，会对相应的标签进行解析。所以我们可以通过 HTML 语法将视频放入到我们的 Markdown 中。
 
用法如下：
 
<iframe height=498 width=510 src="视频地址">
 
其中 height 和 width 是 HTML 中的属性可以设置视频的大小，我们也可以使用 HTML 中的其他属性对插入视频进行相应设置。
 
本地插入
 
在 src 中加入本地视频所对应的路径即可。
 
<iframe height=498 width=510 src="本地视频路径">
 
在线插入
 
在 src 中加入视频链接即可。
 
<iframe height=498 width=510 src="在线视频链接">
 
在这里提供一种方法，在我们没有服务器的情况下，让本地视频获取在线链接：
 
以网易云为例：
 
 
我们需要插入的视频：
 
 
 
进入网易云的创作中心发布本地视频
 
 
 
找到我们发布的视频
 
 
 
将网页链接插入即可
 
 
这样获取整个页面肯定不太舒服，我们还可以通过开发者工具，找到单独的视频链接
 
 
<iframe height=498 width=510 src="http://vodkgeyttp9.vod.126.net/cloudmusic/1FgSA8LX_3222439799_sd.mp4?wsSecret=25dc3b1d0e2fcc4c65db0cab7d6f107d&wsTime=1606454043">
 
上述方法我们利用其他平台发布视频进行获取链接都是有效的。