SyntaxHighlighter（Ver3.x）の導入方法

2011年06月02日

コードを記載する記事が増えてきたこともあり、言語に合わせて構文の色分け表示（シンタックスハイライト）をしてくれるJavaScript「SyntaxHighlighter」を導入しました。

最初に

SyntaxHighlighterが上手く動かないということで当記事に辿りつかれる方も多いと思いますので、最初に導入に際しての注意事項を書いておきます。

SyntaxHighlighterは、ページ読み込み後に動作させないと上手く機能しません。そのため、フッター部で読み込ませるか、もしくはヘッダ部に記述する場合は、window.onloadを使う必要があります。（詳しくは後述します）

SyntaxHighlighterとは

20を超える言語のシンタックスハイライトを実現するJavaScriptです。

非常に導入が簡単でなおかつ多数の言語に対応していることから、多くのサイト・ブログで使われています。たぶん、シンタックスハイライトとしてはもっとも利用率の高いJSだと思います。

SyntaxHighlighterの導入

なお、下記の導入手順はVer3.0.83時点のものです。

SyntaxHighlighterの公式サイトで、ダウンロードページの「Click here to download」をクリックして、適当な場所に保存します。
ダウンロードしたファイルを解凍し、フォルダ内にある「scripts」と「styles」フォルダをサーバー上にアップロードします。
たとえば当サイトの場合は、以下のようにアップロードしています。
```
/public_html/js/syntaxhighlighter/scripts
/public_html/js/syntaxhighlighter/styles
```

次にHTMLファイルを開き（WordPressの場合はthemeフォルダ内の「header.php」）、以下のコードを<head>～</head>に追加します。

<link type="text/css" rel="stylesheet" href="[path]/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="[path]/styles/shThemeDefault.css"/>
<script type="text/javascript" src="[path]/scripts/shCore.js"></script>
<script type="text/javascript" src="[path]/scripts/shAutoloader.js"></script>
<script type="text/javascript" src="[path]/scripts/shBrushXml.js"></script>
<script type="text/javascript">
window.onload=function(){
	SyntaxHighlighter.autoloader(
		 "bash                      [path]/scripts/shBrushBash.js"
		 ,"css                      [path]/scripts/shBrushCss.js"
		 ,"html xml xhtml           [path]/scripts/shBrushXml.js"
		 ,"js jscript javascript    [path]/scripts/shBrushJScript.js"
		 ,"perl pl                  [path]/scripts/shBrushPerl.js"
		 ,"plain                    [path]/scripts/shBrushPlain.js"
		 ,"php                      [path]/scripts/shBrushPhp.js"
		 ,"python py                [path]/scripts/shBrushPython.js"
		 ,"sql                      [path]/scripts/shBrushSql.js"
	);
	SyntaxHighlighter.defaults['toolbar'] = false;
	SyntaxHighlighter.all();
}
</script>

※[path]のところは、各自がSyntaxHighlighterをアップロードしたフォルダを指定してください。また、言語の種類に関しては自分が必要とするものがあれば適宜追加してください。

実際の記事において、コードを書く際に<pre>～</pre>で囲います。さらにこの<pre>に「brush:[言語]」のclassを設定してください。具体的には以下のようになります。
```
<pre class="brush:php">
<?php
	echo "hogehoge";
?>
</pre>
```

導入の補足

以上でSyntaxHighlighterそのものは動作するはずですが、上記のコードについて二、三補足しておきます。

window.onloadの利用

上記のコードでは、SyntaxHighlighterの主動作である「SyntaxHighlighter.all();」をwindow.onloadしています。

これはなぜかというと、SyntaxHighlighterは動作した時点でいきなり<pre>タグを探しにいくため、ページ全体を読み込ませた後に動作させないと、<pre>を見つけられず機能しないためです。

これを避けるためにwindow.onloadを使い、ページ読み込み後に動作させています。
または別解として、window.onloadは使わずにフッター部で読み込ませても良いと思います。

実体参照についての注意

SyntaxHighlighterでpreタグを使う場合、preタグ内の「<」は「<」として実体参照の形で書かないとうまく動作しません。

これを避けるために、<script>タグを使う方法が公式に載っています。
ただ、これはこれでRSSで上手く読み込まれない可能性があるなどデメリットもあるため、私は<pre>で囲んでから、あとでまとめて置換しています。

この辺りは各自使いやすい方を選んでいただければと思います。

autoloaderについて

SyntaxHightlighter3.xからはautoloaderという機能が実装されました。

これは最初からすべての言語のシンタックスハイライトを読み込むのではなく、必要となった時点で特定の言語だけを読み込むものです。余計な読み込みが不要になる分、動作が軽くなることが期待できます。

詳しくは、下記の記事が非常に参考になります。

【Javascript】SyntaxHighlighter 3.0 の新機能と注意点

toolbarの設定

SyntaxHighlighterをデフォルト設定で使うと、コード右上に「？」というクエスチョンマークが表示されます。

このマークをクリックするとSyntaxHightlighter公式サイトへのリンクが表示されるのですが、不要に感じる場合も多いと思います。そこで、以下の一行を追加することでこのマークを非表示にできます。

SyntaxHighlighter.defaults['toolbar'] = false;

Sabakura Blog