Syntax Highlighter for WordPress の使い方

2011/04/05 2013/05/08

自分用のメモ的なエントリーです。
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>
とします。

こちらが
『[]』

echo 'Hello,World!';

1	echo 'Hello,World!';

こちらが
<pre>タグ

echo 'Hello,World!';

1	echo 'Hello,World!';

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

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

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

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

■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が見た感じですが、ほぼデフォルトで問題なさそうです。

ではここでテスト表示。

<p>PHP で 10 までかぞえます...</p>
<?php
	$n = 1;
	while($n <= 10)
	{
		echo "$n <br />";
		$n++;
	}
?>

PHP で 10 までかぞえます...

<?php

$n = 1;

while($n <= 10)

{

echo "$n ";

$n++;

}

<pre>タグ

<p>PHP で 10 までかぞえます...</p>
<?php
	$n = 1;
	while($n <= 10)
	{
		echo "$n <br />";
		$n++;
	}
?>