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

個人希望代碼塊能夠實現下面功能：

調整代碼塊的背景顏色

更換代碼高亮的風格

能夠自定義哪些關鍵字、類/結構體進行高亮

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

接下來是配置的具體教程

調整代碼塊的背景顏色

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

首先在博客園后臺管理-設置中會看到，需要你發送郵件到contact@cnblogs.com申請Js權限

等待一段時間，申請成功后，在博客園后臺管理-設置-頁面定制CSS添加項目代碼

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

其中需要留意的是背景顏色和文本顏色屬性的設置，背景色RGB是每個單色8位，即對應2個16進制位；文本色則是每個單色4位，對應1個16進制位。

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

下載Highlight.js

去官方網站：https://highlightjs.org/

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

解壓后，根據官網提供的風格展示，選擇自己喜好的風格上傳到博客園后臺管理上。

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

然后在設置-頁腳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換成選擇的風格的文件名

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

嘗試修改highlight.pack.js文件內容

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

但如果其實仔細觀察的話可以發現里面的代碼是用來進行語法分析的。我們不需要關注里面的實現，只需要找到里面收納的關鍵字類型、支持的原生類型進行修改/添加，就可以實現自定義了。

找到keyword部分可以自行修改默認支持的關鍵字集合

然后找到built_in部分可以修改默認支持的類名、結構體名或者函數名

literal部分則是默認的字面值

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

如果想要給宏加上高亮的話，可以回去翻vs2015.css，尋找對應宏顏色的支持項。可以看到

可以在集合c添加variable項，然后用字符串的形式引入關鍵詞。比如說這里我想要支持宏TRUE和FALSE，就可以這樣添加：

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

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

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

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

然后嘗試用markdown編寫博客，發布草稿，自行對這兩個項進行測試即可。加上宏和枚舉值后，最終我的測試效果如下：

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

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

而且其實不止是博客園，這種方式也可以讓你在別的地方實現自定義的語法高亮效果，快動手試一下吧！

轉載于:https://www.cnblogs.com/X-Jun/p/9332366.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。