五分鐘搭建一個MarkDown文檔解析器

tinna 發布于2019-08-21 18:40 / 979人閱讀

摘要：字數閱讀時間分鐘前言本文的旨在講述如何從零開始搭建一個文檔展示工具。整個過程非常簡單，咱稍微花五分鐘就可以搭建一個定制化的文檔解析器，是不是很酷呀首先我們曬一張成果圖看看效果吧正文環境準備插件一款最受歡迎的文件解析插件。

字數：790

閱讀時間：5分鐘

前言

??本文的旨在講述如何從零開始搭建一個MarkDown文檔展示工具。整個過程非常簡單，咱稍微花五分鐘就可以搭建一個定制化的MD文檔解析器，是不是很酷呀！

??首先我們曬一張成果圖看看效果吧：

正文 1.環境準備

①marked插件

??一款最受歡迎的markdown文件解析插件。插件地址：https://github.com/chjj/marked

②highlight插件

??格式化顯示各種語言的前端插件，用來顯示文檔中代碼部分。插件地址：http://highlightjs.readthedoc...

③JQuery插件

④ZUI插件

??這是一款基于bootstrap封裝的GUI框架，這個是筆者經常用的一個框架，隨意選擇它。這里我們只是使用了它的樣式，是可選項，大家可以選擇自己喜歡的GUI框架來展示。插件地址：http://zui.sexy/#javascript/m...

2.工具搭建

??環境準備完畢，那就開始搭建吧！

??先創建一個index.html文件，代碼如下：




  
  Title

??頁面引入剛才準備的資源JQuery、marked、highlight和zui。這里highlight插件有許多可選樣式文件，大家可以隨意選擇 styles 文件夾下任意一款喜歡的樣式。

??然后創建一個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();

            //給生成的文檔中統一添加樣式
            $("table").addClass("table");
        }
    });
});

??代碼解釋如代碼注釋所述，這里只是使用了marked和highlight插件的基本用法，詳細用法見環境準備中的插件地址中文檔介紹。

??最后創建一個樣式文件test.css，代碼如下：

body{
  padding: 50px;
}

??這里只是寫了一個簡單的樣式以作示例。大家可以通過樣式控制md文檔的顯示方式。

??至此，整個工具搭建完畢，只需要將頁面運行起來就可以看到效果了。這是一款完全屬于我們自己的md解析工具，我們可以按照自己的喜好方式隨意修改文檔的展示方式，很酷吧！

??歡迎大伙關注我的微信公眾號，和老司機一起擼代碼：

云服務器 GPU云服務器四五互聯主機器 java 文檔解析三五互聯域名解析 php解析doc文檔

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90698.html

Django搭建個人博客：使用Markdown語法書寫文章

摘要：重新打開一個命令行窗口，進入虛擬環境，安裝是一種通用語法高亮顯示器，可以幫助我們自動生成美化代碼塊的樣式文件。上一章我們實現了文章詳情頁面。為了讓文章正文能夠進行標題、加粗、引用、代碼塊等不同的排版（像在Office中那樣！），我們將使用Markdown語法。安裝Markdown Markdown是一種輕量級的標記語言，它允許人們使用易讀易寫的純文本格式編寫文檔，然后轉換成有效的或...

沈建明 2019-07-30 17:53 評論0 收藏0
Django 博客開發教程 9 - 支持 Markdown 語法和代碼高亮

摘要：注意如果你按照教程中的方法做完后發現代碼依然沒有高亮，請依次檢查以下步驟確保在渲染文本時添加了拓展，詳情見上文。有些樣式文件可能對代碼高亮沒有作用，首先嘗試用樣式文件做測試。在支持語法和代碼高亮追夢人物的博客的評論區留言。為了讓博客文章具有良好的排版，顯示更加豐富的格式，我們使用 Markdown 語法來書寫我們的博文。Markdown 是一種 HTML 文本標記語言，只要遵循它約定...

zr_hebo 2019-07-31 10:57 評論0 收藏0
Element 一套優雅的 Vue 2 組件庫是如何開發的

摘要：今年的大會上，受到作者現場開源項目的感染，我們也在現場宣布開源這套基于開發的組件庫。一個文件夾下有所有的官方插件，直到發現他們用了一個叫的工具。那么如何寫樣式同時單獨發布的組件如何引用樣式文件也是我們要解決的問題。 showImg(https://segmentfault.com/img/bVDD9H?w=2502&h=1222); 今年的 JSConf 大會上，受到 gridcont...

lscho 2019-08-20 11:21 評論0 收藏0
26天學通前端開發（配資料）

摘要：網上有很多前端的學習路徑文章，大多是知識點羅列為主或是資料的匯總，數據量讓新人望而卻步。天了解一個前端框架。也可以關注微信公眾號曉舟報告，發送獲取資料，就能收到下載密碼，網盤地址在最下方，獲取教程和案例的資料。前言好的學習方法可以事半功倍，好的學習路徑可以指明前進方向。這篇文章不僅要寫學習路徑，還要寫學習方法，還要發資料，干貨滿滿，準備接招。網上有很多前端的學習路徑文章，大多是知...

blair 2019-08-21 16:59 評論0 收藏0
手把手教你用vue搭建個人站

摘要：在我轉前端以來，一直想要實現一個愿望自己搭建一個可以自動解析文檔的個人站今天終于實現啦，先貼上我的地址確認需求其實一個最簡單的個人站，就是許多的頁面，你只要可以用寫出來就可以，然后掛到上。在我轉前端以來，一直想要實現一個愿望：自己搭建一個可以自動解析Markdown文檔的個人站今天終于實現啦，先貼上我的blog地址確認需求其實一個最簡單的個人站，就是許多的HTML頁面，你只要...

xietao3 2019-08-02 10:58 評論0 收藏0