搞一下markdown-it，給博客加個markdown解析

前言

繼續個人自建博客之旅，平時寫文章，記筆記，都用在本地用markdown來寫（我用的VNote，超級好用，安利一波😜），因此想着本身的博客能直接使用本身的markdown文件就行了🤔。 因而我就開始找各類解決方案的道路，若是要將markdown內容網頁顯示，必不可少的要轉爲html。目前瞭解到目前博客渲染markdown爲有兩種方案：

• 直接將markdown轉成html儲存起來，訪問文章直接訪問html
• 在訪問文章的時候將markdown渲染成html輸出，而後呈現

兩種方案各有千秋，我如今也沒考慮啥SEO友好的，也不想產生多餘的html文件，只要個人markdown，因此理所固然選擇了後者。（我不會說我技術不夠，只想到了這個🐶）。

固然了，動態渲染markdown也分前端渲染和後端渲染，做爲一個前端新手堅決果斷選擇了前端渲染（由於後端目前我只會一點點PHP，又感受到了本身的無知🙃），因此我要先搞一個（嫖一個）瀏覽器環境使用的markdown渲染器。

實現

使用markdown-it

markdown渲染器（仍是叫markdown解析器，我也沒分清😂）就是將輸入markdown語法的字符串而後解析成HTML字符串。網上開源的md解析庫不少，固然我找的是JS的解析庫，像marked，showdown，markdown-it等等，我選的是**markdown-it**，我也不懂什麼優缺點，只是爲了和我本地的VNote保持一致，本地使用，我選的就是這個渲染器，而後加各類插件拓展功能。

使用的插件列表：

• markdown-it-sub 上標
• markdown-it-sup 下標
• markdown-it-footnote 腳註
• markdown-it-deflist 定義列表
• markdown-it-mark 標記
• markdown-it-task-lists 任務列表
• markdown-it-anchor和markdown-it-toc-done-right 這兩個好兄弟是來弄目錄的
• highlight.js 代碼高亮

具體使用看文檔研究啦，還好有👉中文文檔👈。

官方文檔這麼說的：

//安裝
npm install markdown-it --save
bower install markdown-it --save
複製代碼

// node.js, 用「類」的方式：
var MarkdownIt = require('markdown-it'),
    md = new MarkdownIt();
var result = md.render('# markdown-it rulezz!');

// 仍是 node.js, 但使用更爽的方式：
var md = require('markdown-it')();
var result = md.render('# markdown-it rulezz!');

// 沒有 AMD 的瀏覽器環境，在 js 腳本加載時才添加到「window」
// 注意，「markdownit」 中沒有破折號。
var md = window.markdownit();
var result = md.render('# markdown-it rulezz!');
複製代碼

看文檔裏好像很簡單，可是我只知道npm怎麼用，還不會node，我只是瀏覽器使用它，怎麼辦？ 沒事，勇敢的面對它，找解決方案

從dist文件夾導入js文件

由於使用瀏覽器環境，因此直接引入腳本文件，（沒有AMD 的瀏覽器環境，在 js 腳本加載時才添加到window），即node_modules/對應插件名稱/dist/目錄下的js文件便可。（注意順序） 到時候用的時候單獨把這些腳本文件複製出來，直接用記好了（我用的相對路徑，index.html和node_modules同級）

<link rel="stylesheet" href="./atom-one-dark.css">//導入代碼高亮樣式文件
    ***********************************************************************
/*從dist文件夾導入js文件*/
    <script src="./highlight.pack.js"></script>//代碼高亮
    <script src="./node_modules/markdown-it/dist/markdown-it.min.js"></script>
    <script src="./node_modules/markdown-it-sub/dist/markdown-it-sub.min.js"></script>
    <script src="./node_modules/markdown-it-sup/dist/markdown-it-sup.min.js"></script>
    <script src="./node_modules/markdown-it-footnote/dist/markdown-it-footnote.min.js"></script>
    <script src="./node_modules/markdown-it-deflist/dist/markdown-it-deflist.min.js"></script>
    <script src="./node_modules/markdown-it-mark/dist/markdown-it-mark.min.js"></script>
    <script src="./node_modules/markdown-it-task-lists/dist/markdown-it-task-lists.min.js"></script>
    //這倆特殊，別導錯了
    <script src="./node_modules/markdown-it-anchor/dist/markdownItAnchor.umd.js"></script>
    <script src="./node_modules/markdown-it-toc-done-right/dist/markdownItTocDoneRight.umd.js"></script>

複製代碼

初始化使用

瀏覽器下使用的插件對象都是掛載在window上的，注意對象名稱是否正確，及時看看控制檯報錯。

var md = window.markdownit({
    html: true, //能夠識別html
    linkify: true,//自動檢測像連接的文本
    breaks: true,//回車換行
    typographer: true,//優化排版，標點
    //代碼高亮
    highlight: function (str, lang) {
        if (lang && hljs.getLanguage(lang)) {
            try {
                return '<pre class="hljs"><code>' +
                    hljs.highlight(lang, str, true).value +
                    '</code></pre>';
            } catch (__) {}
        }
        return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
    }
})
.use(window.markdownitSub)
.use(window.markdownitSup)
.use(window.markdownitFootnote)
.use(window.markdownitDeflist)
.use(window.markdownitTaskLists)
.use(window.markdownitMark)
.use(window.markdownItAnchor, {
    permalink: false,
    permalinkBefore: false,
    permalinkSymbol: '#'
})
.use(window.markdownItTocDoneRight, {
    containerClass: 'toc',
    containerId: 'toc',
    listType: 'ul',
    listClass: 'listClass',
    itemClass: 'itemClass',
    linkClass: 'linkClass',
    callback: function (html, ast) {
    //把目錄單獨列出來
        left.innerHTML = html;
    }
});
複製代碼

markdown-it-mark引入文件的小坑

引入了markdown-it-mark插件後，我在文檔上沒看到它window上的對象名稱，因而我直接用了use(window.markdownitMark)，這是我猜的，絕不意外控制檯報錯了Uncaught TypeError: Cannot read property 'apply' of undefined，說明個人名稱寫錯了。因而我打印了window，而後找這個插件對象的名稱，而後發現了叫它叫markdown-it-mark.js。我一臉的問號（保持微笑🙂x1），什麼鬼？這一點很差引用，因而我打開了markdown-it-mark.min.js這個文件，Ctrl+F查找markdown-it-mark.js，而後替換爲markdownitMark，而後use(window.markdownitMark)，一切都完美了。

注：大概是在圖中的位置

獨立導航目錄

要把目錄獨立出來需藉助markdown-it-anchor和markdown-it-toc-done-right 這兩個插件，可是這兩個插件又坑到一個做爲新手的我了。

1. 引入的腳本文件是markdownItAnchor.umd.js和markdownItTocDoneRight.umd.js兩個，這是我打印window試出來的（保持微笑🙂x2）
2. 官方文檔的示例代碼是use(window.markdownitAnchor)和use(window.markdownitTocDoneRight)，可是我打印了控制檯發現其實應該這麼用use(window.markdownItAnchor)和use(window.markdownItTocDoneRight)，字母大小寫i和I（保持微笑🙂x3，請想像個人心情），都不考慮下新手的感覺的，我那麼信任文檔。
3. 具體的實現思路就是利用markdown-it-toc-done-right 的回調函數callback把目錄的HTML取出來放到別的盒子裏，具體的配置根據喜愛配吧（去看看文檔😂）

use(window.markdownItAnchor, {
    permalink: false,
    permalinkBefore: false//這些有須要就去看文檔吧
})
.use(window.markdownItTocDoneRight, {
    containerClass: 'toc',//生成的容器的類名，這樣最後返回來的字符串是 <nav class="toc"><nav/>
    containerId: 'toc',//生成的容器的ID，這樣最後返回來的字符串是 <nav id="toc"><nav/>
    listType: 'ul',//導航列表使用ul仍是ol
    listClass: 'listClass',//li標籤的樣式名
    linkClass: 'linkClass',//a標籤的樣式名
    callback: function (html, ast) {
        //把目錄單獨列出來
        left.innerHTML = html;
    }
})
複製代碼

最終成果