キャンペーン、サンネットブログ｜ソースコードをきれいにハイライト表示する『SyntaxHighlighter』

こんにちは。
本日は、ブログなどでJSやPHPのソースコードをきれいにハイライト表示してくれるJS『SyntaxHighlighter』を紹介します。

まず、SyntaxHighlighter からダウンロードします。最新版は 2.1.364 です。
ダウンロードしたファイルを解凍すると「scripts」、「styles」フォルダが生成されます。
これらのファイルをサーバにアップロードします。

次にHTMLソース内で以下のコードを記述します。

<link type="text/css" rel="stylesheet" href="/SyntaxHighlighter/css/shCore.css" />
<link type="text/css" rel="stylesheet" href="/SyntaxHighlighter/css/shThemeDefault.css" />
<script type="text/javascript" src="/SyntaxHighlighter/js/shCore.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/js/shBrushXML.js"></script>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '/SyntaxHighlighter/js/clipboard.swf';
SyntaxHighlighter.config.strings.expandSource = 'ソースを展開';
SyntaxHighlighter.config.strings.viewSource = 'プレーン表示';
SyntaxHighlighter.config.strings.copyToClipboard = 'クリップボードへコピー';
SyntaxHighlighter.config.strings.copyToClipboardConfirmation ='クリップボードへコピーしました';
SyntaxHighlighter.config.strings.print = '印刷';
SyntaxHighlighter.config.strings.help = 'help';
SyntaxHighlighter.all();
</script>

1行目のshCore.cssと3行目のshCore.jsは必須です。
2行目のshThemeDefault.cssも必須ですが、テーマに合わせて別のcssを指定してもいいです。
4行目はハイライト表示させたい言語に合わせて指定してください。
言語とJSの相対表は SyntaxHighlighter - brushes を参考にしてください。
6行目以降はアイコンへのマウスイベント時のテキストの日本語化のための設定です。

次に使い方は以下のように<pre>タグのclass属性に「brush:html」と設定します。
brush:以降のhtmlの部分にはハイライト表示させる言語に合わせて指定します。
言語とbrushの相対表は SyntaxHighlighter - brushes を参考にしてください。

<pre class="brush:html">
<p>Hello World</p>
</pre>

JavaScriptのソースコードの表示にはclass属性に「brush:js」と設定します。

<script type="text/javascript">
alert('Hello World');
</script>

PHPのソースコード表示にはclass属性に「brush:php」と設定します。

<?php
echo "Hello World";
?>