簡介
昨天寫了一篇關(guān)于strapdown.js轉(zhuǎn)化markdown語法的用法介紹,今天我將給大家簡單介紹markdown.convert.js的使用。
正文
markdown.convert.js和strapdown最大的不同就是markdown.convert.js并沒有集成樣式篡诽,也就是說markdown.convert.js只負(fù)責(zé)將markdown語法轉(zhuǎn)化為HTML語法,是真的非常簡單榴捡。相比strapdown.js,他更適合需要高度自定義markdown的同學(xué)杈女。
用法
- 插入script標(biāo)簽,引入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標(biāo)簽可以替換成其他任何的HTML標(biāo)簽,添加任何CSS選擇器项乒,這里我只是沿用了strapdown.js的使用方法而已啰劲。
- 用markdown.convert.js語法進(jìn)行轉(zhuǎn)化
<script >
var target = document.querySelector("xmp")
var c = new Markdown.Converter()
var html = c.makeHtml(document.querySelector("xmp").innerText)
document.body.innerHTML = html
</script>
這樣就可以了
放在瀏覽器運(yùn)行的結(jié)果如下:
是不是很簡單啊檀何!
CSS樣式表
這樣做確實(shí)很簡單呈枉,不給自己寫CSS依然讓人痛苦,所以我在其他markdown編輯器中發(fā)現(xiàn)了以下幾個CSS文件樣式表埃碱,效果圖如下:
以下是CSS源碼百度網(wǎng)盤地址:
鏈接: https://pan.baidu.com/s/1PHYFk98FkTfcvPX_LKTOPA 密碼: vmzx