轉(zhuǎn)化Markdown語法—— Markdown.Converter.js(附markdown相關(guān)CSS樣式表)

簡介

昨天寫了一篇關(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é)杈女。

用法

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

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末猖辫,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子砚殿,更是在濱河造成了極大的恐慌啃憎,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,602評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件似炎,死亡現(xiàn)場離奇詭異辛萍,居然都是意外死亡悯姊,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評論 2 382
  • 文/潘曉璐 我一進(jìn)店門贩毕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來悯许,“玉大人,你說我怎么就攤上這事辉阶∠群荆” “怎么了?”我有些...
    開封第一講書人閱讀 152,878評論 0 344
  • 文/不壞的土叔 我叫張陵谆甜,是天一觀的道長垃僚。 經(jīng)常有香客問我,道長规辱,這世上最難降的妖魔是什么谆棺? 我笑而不...
    開封第一講書人閱讀 55,306評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮罕袋,結(jié)果婚禮上改淑,老公的妹妹穿的比我還像新娘。我一直安慰自己浴讯,他們只是感情好溅固,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,330評論 5 373
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著兰珍,像睡著了一般。 火紅的嫁衣襯著肌膚如雪询吴。 梳的紋絲不亂的頭發(fā)上掠河,一...
    開封第一講書人閱讀 49,071評論 1 285
  • 那天,我揣著相機(jī)與錄音猛计,去河邊找鬼唠摹。 笑死,一個胖子當(dāng)著我的面吹牛奉瘤,可吹牛的內(nèi)容都是我干的勾拉。 我是一名探鬼主播,決...
    沈念sama閱讀 38,382評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼盗温,長吁一口氣:“原來是場噩夢啊……” “哼藕赞!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起卖局,我...
    開封第一講書人閱讀 37,006評論 0 259
  • 序言:老撾萬榮一對情侶失蹤斧蜕,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后砚偶,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體批销,經(jīng)...
    沈念sama閱讀 43,512評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡洒闸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,965評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了均芽。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片丘逸。...
    茶點(diǎn)故事閱讀 38,094評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖掀宋,靈堂內(nèi)的尸體忽然破棺而出深纲,到底是詐尸還是另有隱情,我是刑警寧澤布朦,帶...
    沈念sama閱讀 33,732評論 4 323
  • 正文 年R本政府宣布囤萤,位于F島的核電站,受9級特大地震影響是趴,放射性物質(zhì)發(fā)生泄漏涛舍。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,283評論 3 307
  • 文/蒙蒙 一唆途、第九天 我趴在偏房一處隱蔽的房頂上張望富雅。 院中可真熱鬧,春花似錦肛搬、人聲如沸没佑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蛤奢。三九已至,卻和暖如春陶贼,著一層夾襖步出監(jiān)牢的瞬間啤贩,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評論 1 262
  • 我被黑心中介騙來泰國打工拜秧, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留痹屹,地道東北人。 一個月前我還...
    沈念sama閱讀 45,536評論 2 354
  • 正文 我出身青樓枉氮,卻偏偏與公主長得像志衍,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子聊替,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,828評論 2 345

推薦閱讀更多精彩內(nèi)容