最近在用 nodejs 搭建一個個人博客,博客當然要有編輯文章的功能啦。個人比較偏愛 hexo 風格的 markdown 格式,所以想自己的博客也是這樣的風格。嘗試了幾個庫,發現 marked 的轉換很好,但是樣式需要自己編寫,這個庫還算滿意。
marked
正如在 github 上的介紹,它能夠識別標題(#等)、段落和換行、區塊引用、列表、強調(**)、斜體(*)、鏈接、圖片、代碼塊等。
准備
首先,在項目中安裝 marked
通過 require 引用文件
准備工作好了,就可以開始愉快的使用 marked 啦~~~
使用方法:
marked(markdownString [,options] [,callback])
markdownString:(string)被編輯的字符串;
options:(object)通過 marked.setOption 方法配置;
callback:(function)需要異步高亮時,在markdownString解析完全后的回調函數;當 options 缺省時,回調函數可以作為第二個參數。
最簡單的
marked 會將字符串 ‘hello’ 轉換為<p>hello</p>。
options
默認選項值:
gfm:使用 GFM 風格。
tables:使用 GFM tables。tables 為true時, gfm 選項也為 true 才起效。
breaks:使用 GFM line breaks。gfm 選項也需為 true 才起效。
pedantic:盡可能的符合 markdown.pl。不修復 markdown 的錯誤或者不良行為。
sanitize:審查輸出。忽略輸入的 HTML。
smartLists:使用 smarter list 替代原始的 markdow。最終可能會使用默認的 pedantic。
smartypants:使用像引號和破折號這樣的“智能”符號。
highlight
highlight:是代碼塊高亮的函數。有兩種方法。
(一)
使用 node-pygmentize-bundled 進行異步高亮。
(二)
使用 highlight.js 進行同步高亮。
highlight參數:
code:需要高亮的代碼。
lang: 代碼塊中指定的編程語言。
callback:使用異步高亮時的回調函數。
marked 會將高亮的代碼塊轉換成<pre><code>content</code></p>。記住,高亮的樣式需要自己設置哦。
可以設置全局的 pre 和 code 樣式來調整它的外觀。
至於段落、標題這些,樣式也可以自行設置成自己喜歡的樣子。
關於 marked 更多的資料,請參考 github。