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加入:

1
2
3
body .syntaxhighlighter .code .container:before {
    display: block;
}
  • 沒有選項可調整字體大小

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

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

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *