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
一、問題分析
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是我在(
兩個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);
}