為 WordPress 程式語法加上 Syntax 顏色的外掛 (Plugin)

WordPress 裡面寫程式的語法, 想要有 Highlight 的顏色, 目前挑選的是用 jQuery 的 Syntax Plugin 來達成.

而此 jQuery Syntax Plugin 於 WordPress 也有包好的 Plugin 可以用, 詳見: Syntax Highlighting - jQuery.Syntax

jQuery Syntax 使用簡介說明

• 官方網站：Syntax Highlighting - jQuery.Syntax
• GitHub：jquery-syntax - JavaScript client-side syntax highlighting.
• jQuery.Syntax DokuWiki Plugin
• jQuery.Syntax WordPress Plugin

WordPress 安裝好此外掛後, 文章內頁的程式碼 要如何撰寫, 才可以有 Syntax 顏色出現呢?

標籤語法使用

• 單行用 <code></code>
• 多行用 <pre></pre>

Syntax 的 class 寫法

因為程式語言都不同, 所以需要在 class 指定要使用的程式語言類型, 寫法如下:

• <pre class="syntax {language}"> and </pre>
• <code class="syntax {language}"> and </code>

language 的種類與寫法可見此篇: jQuery.Syntax Supported Languages

若內容有中文, 要記得加上 "escaped", 不然內容會全部都消失, ex:

• <pre class="syntax escaped {language}">

完整範例

<pre class="syntax escaped bash-script">#!/bin/bash
function f() {
sleep "$1"
echo "$1"
}
while [ -n "$1" ]
do
f "$1" &;
shift
done
wait</pre>

就會產生下述:

#!/bin/bash
function f() {
    sleep "$1"
    echo "$1"
}
while [ -n "$1" ]
do
    f "$1" &;
    shift
done
wait

程式語言語法對照表

相關網頁

• WP-Syntax - Wrap code blocks with <pre lang="LANGUAGE" line="1"> and </pre>
• SyntaxHighlighter - 支援的程式語言: SyntaxHighlighter Bundled Brushes
• 10 jQuery Syntax Highlighters
• balupton/jquery-syntaxhighlighter · GitHub
• jQuery Syntax Highlighter - Based on Google's Prettify