在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

一、問題分析

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是我在(

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);
}