本文同步發表在我的個人部落格
http://www.soaringroad.com/editor/121

概述

之前有一篇介紹過Markdown轉HTMLAngular5學習筆記–Html顯示Markdown語言,有興趣的同學可以參考參考，今天介紹的是另外一個Package，也會是非常好用的。

• markdown-it
• highlight.js

markdown-it

markdown-it是一個將markdown轉化成html文字的包，並且附帶了大量的功能，此外，還提供了一些外掛，依賴一下就可以直接使用。

https://github.com/markdown-it/markdown-it

安裝markdown-it

利用NPM，命令列輸入

npm install markdown-it --save

使用markdown-it

我用的是Angular,所以

import md from 'markdown-it'; // 我用的是TypeScript，如果是Node的話，要用require
const markdown = md({
  html: true,
  xhtmlOut: false,
  breaks: false,
  langPrefix: 'language-',
  linkify: false,
  typographer: false,
  quotes: '“”‘’',
  highlight: function (/*str, lang*/) { return ''; }
});
const testText = '# 123';
markdown.render(testText)
 

具體使用請參照官網

highlight.js

highlight.js提供了強大的高亮的功能，不僅可以關鍵字高亮，還可以自動化檢測語言。

https://highlightjs.org/

https://github.com/highlightjs/highlight.js

安裝highlight.js

如果只是普通網頁的話，直接去CDN引用檔案就可以，其中default.min.css是高亮的式樣，還有其他的風格可以選擇。

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
 

如果是Nodejs或者Angular之類的話，命令列輸入下面的命令，然後在index.html中引用css也好，在css檔案中@import也可以。

npm install --save highlight.js

使用highlight.js

加上下面的程式碼，就會在畫面Load時呼叫。

<script>hljs.initHighlightingOnLoad();</script>

當然也有手動呼叫的時候:

import hljs from 'highlight.js'; // 我用的是TypeScript，如果是Node的話，要用require
const highlighted = hljs.highlight('java',content,true);// 不知道語言的話可以呼叫highlightAuto方法，自動檢測語言

具體使用請參照官網

markdown-it整合highlight

細心的你可能已經發現markdown-it的配置中有個

highlight: function (/*str, lang*/) { return ''; }

其實就是要我們寫個方法，來highlight，所以，整合一下就是下面這樣

import hljs from 'highlight.js';
import md from 'markdown-it';

function highlight(str, __) {
  try {
    return '<pre><code class="hljs">' + hljs.highlightAuto(str).value + '</code></pre>';
  } catch (__) {
    console.log(__);
  }
}


const markdown = md({
  html: true,
  xhtmlOut: false,
  breaks: false,
  langPrefix: 'language-',
  linkify: false,
  typographer: false,
  quotes: '“”‘’',
  highlight: highlight
});
}

四空格方式的markdown在生成<pre><code>的時候，並不會觸發highlight，所以需要修改成和```一樣的規則。

markdown.renderer.rules.code_block = markdown.renderer.rules.fence;