轉化Markdown語法—— Markdown.Converter.js(附markdown相關CSS樣式表)

簡介

昨天寫了一篇關于strapdown.js轉化markdown語法的用法介紹,今天我將給大家簡單介紹markdown.convert.js的使用。

正文

markdown.convert.js和strapdown最大的不同就是markdown.convert.js并沒有集成樣式,也就是說markdown.convert.js只負責將markdown語法轉化為HTML語法,是真的非常簡單。相比strapdown.js,他更適合需要高度自定義markdown的同學。

用法

  1. 插入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的使用方法而已。

  1. 用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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容