資訊專欄INFORMATION COLUMN
摘要：字?jǐn)?shù)閱讀時(shí)間分鐘前言本文的旨在講述如何從零開(kāi)始搭建一個(gè)文檔展示工具。整個(gè)過(guò)程非常簡(jiǎn)單，咱稍微花五分鐘就可以搭建一個(gè)定制化的文檔解析器，是不是很酷呀首先我們曬一張成果圖看看效果吧正文環(huán)境準(zhǔn)備插件一款最受歡迎的文件解析插件。
字?jǐn)?shù)：790
閱讀時(shí)間：5分鐘
前言??本文的旨在講述如何從零開(kāi)始搭建一個(gè)MarkDown文檔展示工具。整個(gè)過(guò)程非常簡(jiǎn)單，咱稍微花五分鐘就可以搭建一個(gè)定制化的MD文檔解析器，是不是很酷呀！
??首先我們曬一張成果圖看看效果吧：
①marked插件
??一款最受歡迎的markdown文件解析插件。插件地址：https://github.com/chjj/marked
②highlight插件
??格式化顯示各種語(yǔ)言的前端插件，用來(lái)顯示文檔中代碼部分。插件地址：http://highlightjs.readthedoc...
③JQuery插件
④ZUI插件
??這是一款基于bootstrap封裝的GUI框架，這個(gè)是筆者經(jīng)常用的一個(gè)框架，隨意選擇它。這里我們只是使用了它的樣式，是可選項(xiàng)，大家可以選擇自己喜歡的GUI框架來(lái)展示。插件地址：http://zui.sexy/#javascript/m...
??環(huán)境準(zhǔn)備完畢，那就開(kāi)始搭建吧！
??先創(chuàng)建一個(gè)index.html文件，代碼如下：
Title
??頁(yè)面引入剛才準(zhǔn)備的資源JQuery、marked、highlight和zui。這里highlight插件有許多可選樣式文件，大家可以隨意選擇 styles 文件夾下任意一款喜歡的樣式。
??然后創(chuàng)建一個(gè)test.js 文件，代碼如下：
$(function(){
//marked插件的基本配置
marked.setOptions({
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false,
highlight: function (code,lang) {
//使用 highlight 插件解析文檔中代碼部分
return hljs.highlightAuto(code,[lang]).value;
}
});
$.ajax({
type:"get",
url : "前端編年史.md",
async : false,
dataType:"text",
success : function(response,status,request) {
document.body.innerHTML = marked(response);
//渲染文檔中代碼部分
hljs.initHighlighting();
//給生成的文檔中統(tǒng)一添加樣式
$("table").addClass("table");
}
});
});
??代碼解釋如代碼注釋所述，這里只是使用了marked和highlight插件的基本用法，詳細(xì)用法見(jiàn)環(huán)境準(zhǔn)備中的插件地址中文檔介紹。
??最后創(chuàng)建一個(gè)樣式文件test.css，代碼如下：
body{
padding: 50px;
}
??這里只是寫了一個(gè)簡(jiǎn)單的樣式以作示例。大家可以通過(guò)樣式控制md文檔的顯示方式。
??至此，整個(gè)工具搭建完畢，只需要將頁(yè)面運(yùn)行起來(lái)就可以看到效果了。這是一款完全屬于我們自己的md解析工具，我們可以按照自己的喜好方式隨意修改文檔的展示方式，很酷吧！
??歡迎大伙關(guān)注我的微信公眾號(hào)，和老司機(jī)一起擼代碼：
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90698.html
摘要：重新打開(kāi)一個(gè)命令行窗口，進(jìn)入虛擬環(huán)境，安裝是一種通用語(yǔ)法高亮顯示器，可以幫助我們自動(dòng)生成美化代碼塊的樣式文件。 上一章我們實(shí)現(xiàn)了文章詳情頁(yè)面。為了讓文章正文能夠進(jìn)行標(biāo)題、加粗、引用、代碼塊等不同的排版（像在Office中那樣！），我們將使用Markdown語(yǔ)法。 安裝Markdown Markdown是一種輕量級(jí)的標(biāo)記語(yǔ)言，它允許人們使用易讀易寫的純文本格式編寫文檔，然后轉(zhuǎn)換成有效的或...
摘要：注意如果你按照教程中的方法做完后發(fā)現(xiàn)代碼依然沒(méi)有高亮，請(qǐng)依次檢查以下步驟確保在渲染文本時(shí)添加了拓展，詳情見(jiàn)上文。有些樣式文件可能對(duì)代碼高亮沒(méi)有作用，首先嘗試用樣式文件做測(cè)試。在支持語(yǔ)法和代碼高亮追夢(mèng)人物的博客的評(píng)論區(qū)留言。 為了讓博客文章具有良好的排版，顯示更加豐富的格式，我們使用 Markdown 語(yǔ)法來(lái)書(shū)寫我們的博文。Markdown 是一種 HTML 文本標(biāo)記語(yǔ)言，只要遵循它約定...
摘要：今年的大會(huì)上，受到作者現(xiàn)場(chǎng)開(kāi)源項(xiàng)目的感染，我們也在現(xiàn)場(chǎng)宣布開(kāi)源這套基于開(kāi)發(fā)的組件庫(kù)。一個(gè)文件夾下有所有的官方插件，直到發(fā)現(xiàn)他們用了一個(gè)叫的工具。那么如何寫樣式同時(shí)單獨(dú)發(fā)布的組件如何引用樣式文件也是我們要解決的問(wèn)題。 showImg(https://segmentfault.com/img/bVDD9H?w=2502&h=1222); 今年的 JSConf 大會(huì)上，受到 gridcont...
摘要：網(wǎng)上有很多前端的學(xué)習(xí)路徑文章，大多是知識(shí)點(diǎn)羅列為主或是資料的匯總，數(shù)據(jù)量讓新人望而卻步。天了解一個(gè)前端框架。也可以關(guān)注微信公眾號(hào)曉舟報(bào)告，發(fā)送獲取資料，就能收到下載密碼，網(wǎng)盤地址在最下方，獲取教程和案例的資料。 前言 好的學(xué)習(xí)方法可以事半功倍，好的學(xué)習(xí)路徑可以指明前進(jìn)方向。這篇文章不僅要寫學(xué)習(xí)路徑，還要寫學(xué)習(xí)方法，還要發(fā)資料，干貨滿滿，準(zhǔn)備接招。 網(wǎng)上有很多前端的學(xué)習(xí)路徑文章，大多是知...
摘要：在我轉(zhuǎn)前端以來(lái)，一直想要實(shí)現(xiàn)一個(gè)愿望自己搭建一個(gè)可以自動(dòng)解析文檔的個(gè)人站今天終于實(shí)現(xiàn)啦，先貼上我的地址確認(rèn)需求其實(shí)一個(gè)最簡(jiǎn)單的個(gè)人站，就是許多的頁(yè)面，你只要可以用寫出來(lái)就可以，然后掛到上。 在我轉(zhuǎn)前端以來(lái)，一直想要實(shí)現(xiàn)一個(gè)愿望： 自己搭建一個(gè)可以自動(dòng)解析Markdown文檔的個(gè)人站 今天終于實(shí)現(xiàn)啦，先貼上我的blog地址 確認(rèn)需求 其實(shí)一個(gè)最簡(jiǎn)單的個(gè)人站，就是許多的HTML頁(yè)面，你只要...
閱讀 1851·2023-04-25 14:49
閱讀 3133·2021-09-30 09:47
閱讀 3126·2021-09-06 15:00
閱讀 2238·2019-08-30 13:16
閱讀 1453·2019-08-30 10:48
閱讀 2684·2019-08-29 15:11
閱讀 1300·2019-08-26 14:06
閱讀 1680·2019-08-26 13:30
