1. 程式人生 > >Angular學習筆記--Markdown轉HTML中highlight

Angular學習筆記--Markdown轉HTML中highlight

本文同步發表在我的個人部落格
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;