1. 程式人生 > >showdown讓你的網站支援Markdown和程式碼塊highlight

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