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

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

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

jQuery Syntax 使用簡介說明

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

相關網頁


關於 Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.
本篇發表於 WordPress 並標籤為 , , 。將永久鏈結加入書籤。

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料