簡介
昨天寫了一篇關于strapdown.js轉化markdown語法的用法介紹,今天我將給大家簡單介紹markdown.convert.js的使用。
正文
markdown.convert.js和strapdown最大的不同就是markdown.convert.js并沒有集成樣式,也就是說markdown.convert.js只負責將markdown語法轉化為HTML語法,是真的非常簡單。相比strapdown.js,他更適合需要高度自定義markdown的同學。
用法
- 插入script標簽,引入markdown.convert.js庫
<script src="http://cdn.bootcss.com/pagedown/1.0/Markdown.Converter.js"></script>
2.書寫一個wrapper包裝HTML語法,放在body中即可,例如
<xmp>
# Markdown text goes in here
## Chapter 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
## Chapter 2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.## Chapter 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</xmp>
xmp標簽可以替換成其他任何的HTML標簽,添加任何CSS選擇器,這里我只是沿用了strapdown.js的使用方法而已。
- 用markdown.convert.js語法進行轉化
<script >
var target = document.querySelector("xmp")
var c = new Markdown.Converter()
var html = c.makeHtml(document.querySelector("xmp").innerText)
document.body.innerHTML = html
</script>
這樣就可以了
放在瀏覽器運行的結果如下:

是不是很簡單??!
CSS樣式表
這樣做確實很簡單,不給自己寫CSS依然讓人痛苦,所以我在其他markdown編輯器中發(fā)現(xiàn)了以下幾個CSS文件樣式表,效果圖如下:

以下是CSS源碼百度網(wǎng)盤地址:
鏈接: https://pan.baidu.com/s/1PHYFk98FkTfcvPX_LKTOPA 密碼: vmzx