JavaScriptもPHPもHTMLもOK！「Syntax Highlighter」の使い方
技術系サイトに必需品！ ソースコードは鮮やかに
2009年03月18日 09時00分更新
Syntax Highlighterの使い方
Syntax Highlighterを使って構文を強調表示するには、以下の手順で行ないます。
まず、HTMLのヘッダー部分に次のような記述を追加して、Syntax HighlighterのJavaScriptとスタイルシートを組み込みます。
<script type="text/javascript" src="http://インストール先/scripts/shCore.js"></script>
<script type="text/javascript" src="http://インストール先/scripts/言語別JavaScript.js"></script>
<link type="text/css" rel="stylesheet" href="http://インストール先/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://インストール先/styles/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://インストール先/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
「インストール先」となっているところは、Syntax Highlighterのインストール先のディレクトリに応じて書き換えます。また、「言語別JavaScript」は、強調表示したいソースコードの言語に応じて、以下の表のとおりJSファイルを指定します。
■言語ごとのJavaScript（主なもの）
| 言語 | JavaScript |
|---|---|
| HTML／XHTML／XML | shBrushXml.js |
| CSS | shBrushCss.js |
| JavaScript | shBrushJScript.js |
| PHP | shBrushPhp.js |
| Perl | shBrushPerl.js |
| Ruby | shBrushRuby.js |
次にHTMLの中で、“ソースコードを表示したい部分”を、以下のようにpre要素で囲みます。
<pre class="brush: 言語名">
ソースコード
</pre>
「言語名」には、表示したいソースコードの言語に応じて、以下の値（表右側）を指定します。
■「brush:」に指定する言語名
| 言語 | 「brush:」に指定する言語名 |
|---|---|
| HTML／XHTML／XML | html |
| CSS | css |
| JavaScript | js |
| PHP | php |
| Perl | perl |
| Ruby | ruby |
基本的な使い方は以上のとおりです。なお、筆者のWebサイトに、いくつかの実際に動くサンプルを設置しました。具体的なソースコードは、以下の各ページを開いて参考にしてください。
- HTMLの場合
http://www.h-fj.com/ascii/sh/html.html - CSSの場合
http://www.h-fj.com/ascii/sh/css.html - PHPの場合
http://www.h-fj.com/ascii/sh/php.html
さらにカスタマイズも可能
今回は基本的な使い方のみ紹介しましたが、Syntax Highlighterは、ルーラーを表示したり、特定の行を反転して強調するなど、さまざまなカスタマイズができます。
詳細はSyntax Highlighterのサイトを参照して、自分好みの表示に仕上げてみましょう。
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
