showdown让你的网站支持Markdown和代码块highlight

在CSDN写博客应该都用过Markdown吧，一种简单的标记语言。而有人拿他跟所见即所得编辑器比较，怎么感觉也对不上。那么在各大论坛、内容网站都支持Markdown的情况下，我们该怎么实现呢？搜索了半天也很少见到相关的资料，在此记录下自己的研究供大家学习。

所需文件：
- markdown.html
- showdown.js(https://github.com/showdownjs/showdown)
- highlight.site.pack.js(https://github.com/isagalaev/highlight.js)
- styles.css
- github.css(本例使用github语法高亮风格的样式)

一、问题分析

Markdown是一种类html标记语言，它的语法并不是浏览器能解析出来的；而是通过showdown.js工具将markdown文本转化为html文本，再由浏览器显示。但解析工具只负责解析目标文本，并不支持样式的填充；highlight.site.pack.js可以对解析后的文本添加class，再引入样式，就能实现语法高亮和自定义样式。下面开始进入正题…

二、实现Markdown文本的解析

1、首先到github下载showdown，我们只要showdown-master\src下的showdown.js
2、编写showdown.html
引入：showdown.js、styles.css
styles.css是我在(https://highlightjs.org/)扒下来的，找不到的私信我可以发给你
这里写图片描述
两个div一个button，markdownCode是目标markdown文本的容器；代码一定要靠左，里面有一段python代码和一个列表；解析按钮触发parser函数；container就是解析后的html文本容器了。

function parser() {
    var converter = new showdown.Converter();
    var code = $(".markdownCode").html();
    var html = converter.makeHtml(code);
    $(".container").html(html);
}

这里我用了jquery，jquery也引入html。
3、打开html点击解析看看结果
这里写图片描述
解析成功！

三、实现代码块语法高亮

https://github.com/isagalaev/highlight.js这个网址让我们引入：highlight.pack.js，但是压缩包里根本没有，只有highlight.js，我曾尝试使用highlight.js，没有效果；我也不知道是什么原因，我们还是先下载下来吧
1、下载highlight，引入里面的github.css，同目录下各种风格的随你玩；
2、用谷歌浏览器审查元素可以发现，目标markdown文本被pre、code两个标签包裹，里面就再没有标签了；若想代码块高亮就要插入标签添加class。
3、在body后追加一段准备处理的html，用pre、code标签包裹
这里写图片描述
里面的一端代码是从highlightjs.org网站拷贝过来的，等会做下对比。
4、引入highlight.site.pack.js，并执行初始化方法，该方法会在页面onload触发

5、刷新html，结果：

再来看看highlightjs.org网站上的

highlight.js中的initHighlightingOnLoad方法

function initHighlightingOnLoad() {
    addEventListener('DOMContentLoaded', initHighlighting, false);
    addEventListener('load', initHighlighting, false);
}