WordPress程式碼區塊語法高亮

顯示程式碼
推薦使用blogtext
連同編輯語法問題一併解決

這篇來講不推薦使用的

SyntaxHighlighter Evolved

在wordpress.com中使用[code]來顯示程式碼時
內建搭配使用的就是這個plugin
wordpress.com上面的說明
用起來很輕鬆,效果也非常好
但這個plugin有一些大的問題,以致於不推薦使用

沒救的問題

最大問題:預先處理=資料污染

SyntaxHighlighter Evolved讓你在輸入程式碼區塊的時候,可以不必自己作html特殊字元脫逸,直接把原始程式貼上即可,他會自行轉換。這樣用起來才方便,每個程式碼顯示的插件都應該這麼作 – – 但他的方法錯了。
他在輸入的資料進資料庫之前,就會先作html特殊字元脫逸,所以實際存進DB的資料,都是被脫逸過的。
若是要拉出來編輯,就再轉換回來一次。
所以日後你只要沒有安裝SyntaxHighlighter Evolved
把文章叫出來編輯的時候,就會看到一堆亂碼,沒人會幫你弄回來

沒法跳過shortcode

正常輸入[[code]],就應該避開shortcode的處理,變成顯示為[code]
但他似乎出了些問題
只有把[code]寫成[code]才能不被處理
再加上他會去認所有支援的語言名稱
像是[cpp] [php] [css] …之類的
輸入這些的時候只能多加小心

有救的問題

在firefox時,左邊數字欄和程式碼無法對齊

(IE和Chrome都正常)
解決方法,在CSS加入:

body .syntaxhighlighter .code .container:before {
 display: block;
}

沒有選項可調整字體大小

例如想讓程式碼比文章內文字體稍小一點
解決方法,在CSS加入:

body .syntaxhighlighter .code, body .syntaxhighlighter .gutter {
 font-size: 0.85em !important;
}

--
現在還在寫blog分享資訊的人越來越少,如果覺得文章對您有幫助,歡迎在底下留言,這樣我也比較有動力繼續寫下去,謝啦!

Leave a Comment

Your email address will not be published. Required fields are marked *

 

Scroll to Top