simditor + highlight.js實現代碼高亮

05-21

來自專欄 Fossen的編程筆記

程序員寫博客免不了要插入一些代碼，simditor可以插入代碼，但只是單純的字元，沒有代碼高亮。highlight.js是一個用於高亮代碼的JavaScript 庫，支持176種語言和79種風格，不依賴其他框架，使用方便。用highlight.js在前端實現代碼高亮，不會給伺服器增加額外的負擔。

1、基礎用法

highlight.js的使用方法很簡單，在網頁上引用js腳本和一種代碼樣式，然後調用initHighlightingOnLoad對代碼著色。無需下載highlight.js，bootcdn上有它的CDN。

<link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/default.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script><script>hljs.initHighlightingOnLoad();</script>

這會找到<pre><code>標籤內的代碼並進行著色，而且會自動判斷代碼語言。simditor的代碼塊正是用標籤<pre><code>標記的。

如果需要對highlight.js有更多的控制，可以使用 highlightBlock和configure，這允許你指定啟用代碼高亮的範圍和時機。例如，你可以不用<pre><code>標籤標記代碼，如果你使用的容器不保留換行的空白，就必須配置highlight.js使用<br>標籤：

hljs.configure({useBR: true});$(div.code).each(function(i, block) { hljs.highlightBlock(block);});

更多的選項可見configure的文檔。

2、代碼語言

highlight.js支持176種語言，基本覆蓋了大部分人的使用需求。雖然highlight.js可以自動判斷代碼類型，但並不總能判斷正確。我們可以在class屬性中指定代碼語言，可用的語言可以查看CSS classes reference，而且class允許加language-和lang-前綴。如果不需高亮可以使用nohighlight class。

<pre><code class="html">...</code></pre><pre><code class="nohighlight">...</code></pre>

simditor默認啟用了選擇代碼語言功能，在編輯代碼塊時，左下角會出現浮動選框用以選擇語言，選擇相應的語言會給<code>元素加上class="lang-xxx"。highlight.js的支持的語言很多，遠多於simditor默認的選項，如果想要高亮其他代碼，就需要在初始化simditor時提供額外的選項，在codeLanguages中列出想要的語言，當然必須是highlight.js也支持的語言。其中name是simditor中選擇語言時顯示的字元串，value則是class的值。

var editor = new Simditor({ textarea: $(#id_content), codeLanguages: [ { name: Python, value: python }, { name: Django, value: django }, { name: Shell, value: shell }, { name: Apache, value: apache }, { name: Java, value: java }, { name: CSS, value: css }, { name: JavaScript, value: javascript }, { name: HTML,XML, value: html }, { name: No Highlight, value: nohighlight }, { name: Diff, value: diff }, { name: SQL, value: sql }, { name: C++, value: c++ }, { name: C#, value: cs }, { name: JSON, value: json }, { name: Markdown, value: markdown }, ..., ] ...,});

3、代碼高亮風格

highlight.js支持79種風格，可以在這裡查看所有的風格和語言：highlight.js demo。切換風格也很簡單，只要引用相應風格的css文件即可。有些風格名可能和css文件名不太一樣，引用前最好先查一下對應的CDN：highlight.js | BootCDN。

比如我的博客使用的風格是tomorrow，只需把default.min.css改為tomorrow.min.css即可，最終的效果即這篇文章中的代碼高亮效果。

<link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/tomorrow.min.css" rel="stylesheet">