このページの本文へ

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サイトに、いくつかの実際に動くサンプルを設置しました。具体的なソースコードは、以下の各ページを開いて参考にしてください。


さらにカスタマイズも可能

 今回は基本的な使い方のみ紹介しましたが、Syntax Highlighterは、ルーラーを表示したり、特定の行を反転して強調するなど、さまざまなカスタマイズができます。

 詳細はSyntax Highlighterのサイトを参照して、自分好みの表示に仕上げてみましょう。

Web Professionalトップへ

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング