看了網上那麼多有關highlight.js的教程，自己還沒學過JavaScript和CSS，硬是花了3天的時間，才終於弄出了自己想要的效果。一開始我的博客園代碼高亮效果是這樣的：
個人希望代碼塊能夠實現下面功能：
- 調整代碼塊的背景顏色
- 更換代碼高亮的風格
- 能夠自定義哪些關鍵字、類/結構體進行高亮
其中第三點並沒有任何教程能夠告訴我怎麼做，但是經過一番折騰，我還是做到了。最終的效果如下：
接下來是配置的具體教程
調整代碼塊的背景顏色
雖然說Highlight.js只用三句JavaScript代碼就可以實現最基本的高亮效果，但是選擇的代碼高亮風格還需要在理想的代碼塊背景上顯示。比如說代碼的字體默認顏色是白色的，但是很多代碼塊的背景色是白的導致看不到代碼字體。所以還需要設置博客園的代碼塊背景顏色。
首先在博客園後臺管理-設置中會看到，需要你發送郵件到[email protected]申請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裏面的深色主題寫代碼了
而且其實不止是博客園，這種方式也可以讓你在別的地方實現自定義的語法高亮效果，快動手試一下吧！