Syntax Highlighter for WordPress の使い方

自分用のメモ的なエントリーです。
SyntaxHighlighter てのは、ソースコードを色付けして見やすく表示するJavascriptのライブラリですが、WordPress用にプラグインとして導入できるので、使ってみることにします。

ダウンロード・インストール

ダウンロードはコチラ。
WordPress ? Syntax Highlighter for WordPress ? WordPress Plugins
http://wordpress.org/extend/plugins/syntax-highlighter/

配布元はコチラっぽいです。
SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/

インストールは例によって例のごとく、検索 or FTPアップロード、有効化の流れで。

使い方

使い方は２つありまして、『[]』を使う方法と、『<pre>』タグを使う方法。

『[]』の方は、使う言語をくくって、中にソースコードと言う形。
具体的には
[html]ソースコード[/html]
[css]ソースコード[/css]
[php]ソースコード[/php]
これでOK。

<pre>タグの方は、使う言語を class で指定。
具体的には
<pre class="brush:php";>ソースコード</pre>
<pre class="brush:html";>ソースコード</pre>
とします。

こちらが
『[]』

こちらが
<pre>タグ

基本的にに同じように表示されますが、違いが２つ。
<pre>タグの場合は、『[』及び『]』を表示するのに、それぞれエスケープ文字（[ → &#91;、] → &#93;）を使用する必要があります。

もうひとつの違いは、出来上がるHTMLのソース。<pre>タグの場合は『<』『>』『"』『'』などの文字も普通に表示されますが、『[]』を使用した場合は全てエスケープされて表示されます。

普段なら特に意識しないところなのですが、SEO TOOLSなどで解析した場合、ソースコードを多く載せているページなどは、キーワードに『&quot;』なんかが上がってくるので、ちょっとこだわる人は注意ですね。

使える言語としては、先のダウンロードサイトにも書いてありますが、以下の言語が指定可能。

■ActionScript3 (as3)
■Bash/shell (bash, shell)
■C, C++ (cpp, c, c++)
■C# (csharp)
■ColdFusion (coldfusion)
■CSS (css)
■Delphi (delphi, pascal)
■diff, patch (diff, patch)
■Erlang (erlang)
■Groovy (groovy)
■Java (java)
■Java Script (javascript)
■JavaFX (javafx)
■Perl (perl)
■PHP (php)
■Plain Text (plain, text)
■PowerShell (powershell)
■Python (python)
■Ruby (ruby)
■Scala (Scala)
■SQL (sql)
■Visual Basic (vb, vbnet)
■XML/HTML (xml, html, xhtml, xslt)

管理画面からは、バージョンの2系統か3系統にするか、行数を表示するかどうか、タブの数など、幾つかの設定が行えます。
toogieが見た感じですが、ほぼデフォルトで問題なさそうです。

ではここでテスト表示。

<pre>タグ

いい感じに、出来てるかな？
おんや？　<?php が妙なことになってるな･･･　うーむ･･･。

-WordPress
-Syntax Highlighter, WordPress