創建hexo風格的markdown頁面


 

最近在用 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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM