為 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

程式語言語法對照表

Language	Aliases	Example
Apache Config	apache	Apache Config
AppleScript	applescript	AppleScript
Assembly	assembly, asm	Assembly
Bash	bash	Bash
Bash Script	bash-script	Bash Script
Basic	basic, vb	Basic
C/C++/Objective-C	clang, cpp, c++, c, objective-c	C/C++/Objective-C
C#	csharp, c-sharp, c#	C#
CSS	css	CSS
Diff	diff, patch	Diff
Go	go	Go
Haskell	haskell	Haskell
HTML	html	HTML
io	io	io
Java	java	Java
JavaScript	javascript, js, actionscript	JavaScript
Kai	kai	Kai
Lisp	lisp, scheme, clojure	Lisp
Lua	lua	Lua
OCaml	ocaml, ml, sml, fsharp	OCaml
Object-Oriented C	ooc	Object-Oriented C
Pascal	pascal, delphi	Pascal
Perl 5	perl5	Perl 5
PHP	php	PHP
Protocol Buffers	protobuf	Protocol Buffers
Python	python	Python
Ruby	ruby	Ruby
Scala	scala	Scala
Smalltalk	smalltalk	Smalltalk
SQL	sql	SQL
SuperCollider	super-collider, sc	SuperCollider
XML	xml	XML
YAML	yaml	YAML

相關網頁

• 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