寫在前面
針對在博客園TinyMCE模式下,內置的插入代碼功能不支持Go語言的問題,本文提出兩個並不十分完美的解決方案。本文所提方案支持代碼高亮、折疊、行號。同時,本文中的方法二可以用來自定義代碼高亮(不管是什么語言)。由於在下並沒有前端基礎,所以某些表述可能不夠確切,歡迎讀者批評指正。
正文
在TinyMCE模式下,有兩種插入代碼塊的方式,如下圖所示。


其中,藍色框中方法是利用第三方插件實現的,支持Go語言,但折疊的代碼展開后不能再折疊,且沒有代碼復制按鈕。紅色框中方法是博客園后台自己實現的,直接生成HTML代碼來渲染高亮,但該方法目前不支持go語言。
針對這種情況,在下找到兩種不太完美的解決方案。
方案一
使用Markdown。
首先需要進行以下設置:進入博客園主頁(https://www.cnblogs.com/)-->鼠標放在右上角自己的頭像上(不要點擊)-->在下拉列表框中點擊“我的博客”-->在頁面上方找到“管理”按鈕並點擊(不同皮膚下“管理”按鈕的位置可能有所不同)-->點擊“設置”標簽-->勾選“顯示行號”-->點擊“保存”。如下圖所示:


然后就可以寫MarkDown代碼了。如下面的Markdown語句,

1 <details> 2 <summary>View Code</summary> 3 4 ```go 5 package main 6 7 import "fmt" 8 9 func main(){ 10 fmt.Println("hello world") 11 } 12 ``` 13 </details>
將產生以下效果:


該方案注意事項如下:
- <summary>View Code</summary> 中 View Code 可以換成自己喜歡的文字,支持中文。
- <summary>View Code</summary> 后面必須空出一行,這一點網上許多資料都沒有提到。
- 需要顯式指明語言(如上面代碼第4行,go或golang都可以,且不區分字母的大小寫)。
以上方案存在明顯缺陷:1)並沒有解決TinyMCE模式下的問題,換用Markdown,屬於耍無賴。2)沒有代碼復制按鈕。
方案二
如前所述,博客園提供“內置”的代碼塊插入功能,支持高亮、折疊、行號、復制等功能。該功能的語法高亮,是利用后台算法,通過將代碼直接用HTML語言“修飾”(指明字體、顏色等)來實現的。遺憾的是,目前該功能還沒有針對Go語言的“修飾器”。
所以,一種從根本上解決問題的思路是:第一步,依然利用內置功能插入Go代碼,只不過先隨便選一種其它語言(如C++、C#等),顯然,此時的高亮肯定是不盡如人意的,因為不同的語言關鍵字有所不同,所以,需要進行第二步。第二步,將【博客園網頁中修飾代碼格式的那段HTML代碼】替換成【支持Go語法高亮的HTML代碼】。
那么,問題來了:1)怎么找到后台HTML代碼?2)怎么得到【支持Go語法高亮的HTML代碼】?不會是需要手寫吧?
回答:1)回到本文第一張圖片,藍色框右邊的按鈕,就是寫着“HTML”的那個,點擊它,就能看到博客對應的HTML代碼。2)肯定不是手寫,但需要借助其它工具,Sublime Text,可以到這里下載,然后根據這里和這里操作。在此特別感謝以上三個鏈接的作者。
至此,動手能力強或者有HTML基礎的讀者,可以搞起來了。想了解細節的,可以往后看。
步驟1:根據上面三個鏈接,安裝 Sublime Text 和 SublimeHighlight 插件,這里不再贅述。
步驟2:到 Sublime Text安裝目錄\Data\Packages\SublimeHighlight 下,打開 themes.png 文件,可以看到各主題名稱和對應的式樣,如下圖:


步驟3:還是在步驟2中的目錄下,用任意文本編輯器(如Sublime Text、notepad++等)打開 SublimeHighlight.sublime-settings 文件,進行如下圖所示的修改:


注意,以上設置的是導出的代碼式樣,不是Sublime Text編輯區的代碼式樣,讀者會發現修改配置后編輯區代碼的式樣沒有變化,這是正常現象。
步驟4:在Sublime Text中鍵入要插入的Go代碼段,注意確保文件后綴為 .go。接着,按下圖操作:


步驟5:用編輯器的批量替換功能,將 background-color: #f8f8f8 全部替換為 color: #008080 ,這里, #f8f8f8 是行號的背景色,不同主題可能會有不同, #f8f8f8 對應的是 default 主題; #008080 是博客園默認的行號顏色,讀者也可以設置自己喜歡的其它顏色。這么做的原因是:博客園插入代碼塊的背景是灰色的(#f5f5f5),如果行號有其它顏色背景的話,會不好看。結果如下圖所示(圖中為 default 主題,並且為清晰展示,手動對代碼進行了換行):


步驟6:在博客園中,使用內置插入代碼按鈕,插入代碼,語言任選一種,勾選“全部折疊”和“顯示行號”,最后點擊“插入代碼”按鈕。如下圖:


步驟7:在博客園編輯頁面,點擊“HTML”按鈕,打開博客對應的HTML代碼,如下圖,用上圖紅框內代碼替換下圖紅框內代碼,然后點擊左下角“更新”按鈕。(下圖中代碼也是經過手動排版的)


步驟8:最終效果如下圖:


GIF顏色有些失真,靜態圖如下


如果想要使用 themes.png 中的黑色背景主題,如 vim 主題,需要在步驟7中圖片上划藍線的語句中加入 style="background: #000000;" ,即將背景設為黑色,同時,建議在步驟5中將行號顏色設為與黑色對比鮮明的顏色(如 #ffc300 )。效果如下:


多說一句,修改步驟7中圖片上划綠線的語句,可以修改整個“代碼展示框”的背景,讀者可以自行試驗。
至此,方案二介紹完畢。
該方法的缺點也很明顯——麻煩!
題外話:
notepad++也能導出HTML文件,十分簡便(貌似高版本的 notepad++ 自帶 NppExport 插件),但不支持連同連行號一起導出(這里有一個解決方案,很佩服作者的清奇思路),同時,生成的HTML代碼將式樣抽離為一堆類選擇器,因此,在和博客園的HTML代碼進行整合的時候會比較麻煩,特別是當一篇博客需要插入多段代碼的時候。
VS Code將代碼導出為HTML文件的步驟更加繁瑣,需要借助第三方工具,且同樣不支持代碼行號。這個局面,在下也很驚訝。如果有知道利用VS Code將代碼導出為HTML的簡單方法的讀者,煩請不吝賜教。
寫在后面
- 上面教程針對的是折疊代碼並顯示行號的情況,如果不需要這些功能,只要在博客園和Sublime Text中做相應調整即可,相信讀者可以舉一反三。
- 再次對本文中所有鏈接的作者表示由衷感謝。
- 在下才疏學淺,文中難免有錯誤疏漏之處,歡迎大家批評指正,您的批評是在下前進的不懈動力。