看了網(wǎng)上那么多有關(guān)highlight.js的教程，自己還沒學(xué)過(guò)JavaScript和CSS，硬是花了3天的時(shí)間，才終于弄出了自己想要的效果。一開始我的博客園代碼高亮效果是這樣的：

個(gè)人希望代碼塊能夠?qū)崿F(xiàn)下面功能：

調(diào)整代碼塊的背景顏色

更換代碼高亮的風(fēng)格

能夠自定義哪些關(guān)鍵字、類/結(jié)構(gòu)體進(jìn)行高亮

其中第三點(diǎn)并沒有任何教程能夠告訴我怎么做，但是經(jīng)過(guò)一番折騰，我還是做到了。最終的效果如下：

接下來(lái)是配置的具體教程

調(diào)整代碼塊的背景顏色

雖然說(shuō)Highlight.js只用三句JavaScript代碼就可以實(shí)現(xiàn)最基本的高亮效果，但是選擇的代碼高亮風(fēng)格還需要在理想的代碼塊背景上顯示。比如說(shuō)代碼的字體默認(rèn)顏色是白色的，但是很多代碼塊的背景色是白的導(dǎo)致看不到代碼字體。所以還需要設(shè)置博客園的代碼塊背景顏色。

首先在博客園后臺(tái)管理-設(shè)置中會(huì)看到，需要你發(fā)送郵件到contact@cnblogs.com申請(qǐng)Js權(quán)限

等待一段時(shí)間，申請(qǐng)成功后，在博客園后臺(tái)管理-設(shè)置-頁(yè)面定制CSS添加項(xiàng)目代碼

.cnblogs-markdown pre code { background-color: #23241f !important;color: #eee!important;}.cnblogs-markdown code { background-color: important; }

其中需要留意的是背景顏色和文本顏色屬性的設(shè)置，背景色RGB是每個(gè)單色8位，即對(duì)應(yīng)2個(gè)16進(jìn)制位；文本色則是每個(gè)單色4位，對(duì)應(yīng)1個(gè)16進(jìn)制位。

如果連同鑲嵌在語(yǔ)句的代碼塊都需要修改上色，則可以刪去上面代碼的第二個(gè)塊。

下載Highlight.js

去官方網(wǎng)站：https://highlightjs.org/

然后獲取它的最新版本，選擇自己需要的語(yǔ)言。

解壓后，根據(jù)官網(wǎng)提供的風(fēng)格展示，選擇自己喜好的風(fēng)格上傳到博客園后臺(tái)管理上。

如果你不需要自己定制某些功能的話，可以也把highlight.pack.js直接上傳

然后在設(shè)置-頁(yè)腳Html代碼添加：

<link rel="stylesheet" href="https://files.cnblogs.com/files/username/style.css"> <script src="https://files.cnblogs.com/files/username/highlight.pack.js"></script> <script>hljs.initHighlightingOnLoad();</script>

這里記得把你的username換成你的博客園ID，style換成選擇的風(fēng)格的文件名

第一次保存后理論上就可以看到代碼高亮效果了。

嘗試修改highlight.pack.js文件內(nèi)容

初步打開該文件進(jìn)行查看，發(fā)現(xiàn)里面把所有的代碼都放進(jìn)了同一行，還將變量用各種單字母命名，有可能是為了盡量減小文件的大小，也可能是為了防止人家去理解代碼含義。

但如果其實(shí)仔細(xì)觀察的話可以發(fā)現(xiàn)里面的代碼是用來(lái)進(jìn)行語(yǔ)法分析的。我們不需要關(guān)注里面的實(shí)現(xiàn)，只需要找到里面收納的關(guān)鍵字類型、支持的原生類型進(jìn)行修改/添加，就可以實(shí)現(xiàn)自定義了。

找到keyword部分可以自行修改默認(rèn)支持的關(guān)鍵字集合

然后找到built_in部分可以修改默認(rèn)支持的類名、結(jié)構(gòu)體名或者函數(shù)名

literal部分則是默認(rèn)的字面值

當(dāng)然這些部分可能還不夠用，比如C/C++還支持宏定義

如果想要給宏加上高亮的話，可以回去翻vs2015.css，尋找對(duì)應(yīng)宏顏色的支持項(xiàng)?？梢钥吹?br />
可以在集合c添加variable項(xiàng)，然后用字符串的形式引入關(guān)鍵詞。比如說(shuō)這里我想要支持宏TRUE和FALSE，就可以這樣添加：

c={... ... ... variable:"TRUE FALSE"}, ...

如果想要支持枚舉的話，也是跟剛才的操作一樣。當(dāng)然你也可以修改.css文件來(lái)做到支持。還有另一種辦法是把風(fēng)格css文件的代碼添加到頁(yè)面定制CSS代碼一欄中，然后你就可以省略下面這句話：

<link rel="stylesheet" href="https://files.cnblogs.com/files/username/style.css">

把改好的文件上傳到博客園，然后加上相應(yīng)的HTML代碼（如果沒加過(guò)的話），就可以看到效果了。如果沒有變化的話，你需要在文件上傳那一頁(yè)下載你的highlight.pack.js，然后在瀏覽器見到代碼頁(yè)后按右鍵選擇重新加載（Chrome瀏覽器），看到代碼內(nèi)容發(fā)送變化即可

然后嘗試用markdown編寫博客，發(fā)布草稿，自行對(duì)這兩個(gè)項(xiàng)進(jìn)行測(cè)試即可。加上宏和枚舉值后，最終我的測(cè)試效果如下：

HRESULT hr = S_OK;// 創(chuàng)建D3D設(shè)備 和 D3D設(shè)備上下文 UINT createDeviceFlags = 0; #if defined(DEBUG) || defined(_DEBUG) createDeviceFlags |= D3D11_CREATE_DEVICE_DEBUG; #endif // 驅(qū)動(dòng)類型數(shù)組 D3D_DRIVER_TYPE driverTypes[] = {D3D_DRIVER_TYPE_HARDWARE,D3D_DRIVER_TYPE_WARP,D3D_DRIVER_TYPE_REFERENCE, }; UINT numDriverTypes = ARRAYSIZE(driverTypes);// 特性等級(jí)數(shù)組 D3D_FEATURE_LEVEL featureLevels[] = {D3D_FEATURE_LEVEL_11_1,D3D_FEATURE_LEVEL_11_0, };

這樣看就很像在Visual Studio里面的深色主題寫代碼了

而且其實(shí)不止是博客園，這種方式也可以讓你在別的地方實(shí)現(xiàn)自定義的語(yǔ)法高亮效果，快動(dòng)手試一下吧！

轉(zhuǎn)載于:https://www.cnblogs.com/X-Jun/p/9332366.html

總結(jié)

以上是生活随笔為你收集整理的博客园使用highlight.js对代码进行高亮，并实现自定义关键词高亮的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。