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のサイトを参照して、自分好みの表示に仕上げてみましょう。