當(dāng)我們?cè)谕瓿梢粋€(gè)任務(wù)時(shí)，會(huì)習(xí)慣性地留些文案來(lái)記錄整個(gè)過(guò)程，一是方便我們以后追溯之前為何會(huì)這么做，會(huì)帶來(lái)什么樣的影響，以及以后該怎么做；二來(lái)可以方便新人在剛接觸時(shí)能夠快速了解。

如果使用記事本的方法來(lái)記憶，我們首先需要建立不同的文檔，還要有一定的時(shí)間去處理不同的格式，只是偶爾的一次記載還好，如果我們常要做這些，有大量的文檔需要處理，那這就需要花費(fèi)大量的時(shí)間來(lái)維護(hù)，對(duì)于工作是很有影響的。

所以我們要有其它的方法來(lái)解決上面這個(gè)問(wèn)題。

最簡(jiǎn)單的方法就是使用 markdown。

但是markdown需要有專門的編譯運(yùn)行才可，如果我們想在網(wǎng)頁(yè)上直接看到的話還需要對(duì)它進(jìn)行處理。

那我們可有辦法對(duì)它進(jìn)行處理嗎？

答案是肯定的，通常我們可以使用 markdown-it來(lái)將它轉(zhuǎn)成 html文檔。

安裝

nodejs 安裝

npm install markdown-it --save

bower 安裝

bower install markdown-it --save

除了以上兩種方法，也可以選擇 cdn https://cdnjs.com/libraries/markdown-it。

使用

下面是最簡(jiǎn)單的使用方法：

var md = require('markdown-it')();
var result = md.render('# 第一次使用);

當(dāng)然，我們也可以做不同的配置，比如：

var md = require('markdown-it')({
  html: true,
  xhtmlOut: false,
});

那么，每個(gè)選項(xiàng)是什么含義呢？

• html: false 在源碼中啟用 HTML 標(biāo)簽
• xhtmlOut: false 使用 '/' 來(lái)閉合單標(biāo)簽 （比如 <br />）。這個(gè)選項(xiàng)只對(duì)完全的CommonMark 模式兼容。
• breaks: false 轉(zhuǎn)換段落里的 '\n' 到
  。
• langPrefix: 'language-' 給圍欄代碼塊的 CSS 語(yǔ)言前綴。對(duì)于額外的高亮代碼非常有用。
• linkify: false 將類似 URL 的文本自動(dòng)轉(zhuǎn)換為鏈接。
• typographer: false 啟用一些語(yǔ)言中立的替換 + 引號(hào)美化
• quotes: '“”‘’' 雙 + 單引號(hào)替換對(duì)，當(dāng) typographer 啟用時(shí)。或者智能引號(hào)等，可以是 String 或 Array。
• highlight: function (/str, lang/) { return ''; } 高亮函數(shù)，會(huì)返回轉(zhuǎn)義的HTML。

語(yǔ)法高亮

var hljs = require('highlight.js');

// 通常的默認(rèn)值們
var md = require('markdown-it')({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (__) {}
    }
    return ''; // 使用額外的默認(rèn)轉(zhuǎn)義
  }
});

如果遇到文檔有 demo 要展示該如何做呢？

我們可以使用 markdown-it-container 來(lái)實(shí)現(xiàn)：

md.use(mdContainer, 'demo', {
    validate: function (param) {
      return !!param.trim().match(/^demo/);
    },
    render: function (tokens, idx) {
      const token = tokens[idx];
      if (token.nesting === 1) {
        return `<div className="demo">`;
      } else {
        return '</div>\n';
      }
    },
  })