解決博客園TinyMCE模式下內置插入代碼塊功能不支持Go語言的問題(兩個並不完美的解決方案)


寫在前面

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

正文

在TinyMCE模式下,有兩種插入代碼塊的方式,如下圖所示。

View Pic

其中,藍色框中方法是利用第三方插件實現的,支持Go語言,但折疊的代碼展開后不能再折疊,且沒有代碼復制按鈕。紅色框中方法是博客園后台自己實現的,直接生成HTML代碼來渲染高亮,但該方法目前不支持go語言。

針對這種情況,在下找到兩種不太完美的解決方案。

方案一

使用Markdown。

首先需要進行以下設置:進入博客園主頁(https://www.cnblogs.com/)-->鼠標放在右上角自己的頭像上(不要點擊)-->在下拉列表框中點擊“我的博客”-->在頁面上方找到“管理”按鈕並點擊(不同皮膚下“管理”按鈕的位置可能有所不同)-->點擊“設置”標簽-->勾選“顯示行號”-->點擊“保存”。如下圖所示:

View Pic

 然后就可以寫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>
View Code

將產生以下效果:

View Pic

該方案注意事項如下:

  1.  <summary>View Code</summary> 中 View Code 可以換成自己喜歡的文字,支持中文。
  2.  <summary>View Code</summary> 后面必須空出一行,這一點網上許多資料都沒有提到。
  3. 需要顯式指明語言(如上面代碼第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 文件,可以看到各主題名稱和對應的式樣,如下圖:

View Pic

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

View Pic

注意,以上設置的是導出的代碼式樣,不是Sublime Text編輯區的代碼式樣,讀者會發現修改配置后編輯區代碼的式樣沒有變化,這是正常現象。

步驟4:在Sublime Text中鍵入要插入的Go代碼段,注意確保文件后綴為 .go。接着,按下圖操作:

View Pic

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

View Pic

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

View Pic

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

View Pic

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

View Pic

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

View Pic

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

View Pic

多說一句,修改步驟7中圖片上划綠線的語句,可以修改整個“代碼展示框”的背景,讀者可以自行試驗。

至此,方案二介紹完畢。

該方法的缺點也很明顯——麻煩!

題外話:

notepad++也能導出HTML文件,十分簡便(貌似高版本的 notepad++ 自帶 NppExport 插件),但不支持連同連行號一起導出(這里有一個解決方案,很佩服作者的清奇思路),同時,生成的HTML代碼將式樣抽離為一堆類選擇器,因此,在和博客園的HTML代碼進行整合的時候會比較麻煩,特別是當一篇博客需要插入多段代碼的時候。

VS Code將代碼導出為HTML文件的步驟更加繁瑣,需要借助第三方工具,且同樣不支持代碼行號。這個局面,在下也很驚訝。如果有知道利用VS Code將代碼導出為HTML的簡單方法的讀者,煩請不吝賜教。

寫在后面

  1. 上面教程針對的是折疊代碼並顯示行號的情況,如果不需要這些功能,只要在博客園和Sublime Text中做相應調整即可,相信讀者可以舉一反三。
  2. 再次對本文中所有鏈接的作者表示由衷感謝。
  3. 在下才疏學淺,文中難免有錯誤疏漏之處,歡迎大家批評指正,您的批評是在下前進的不懈動力。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM