SyntaxHighlighterでソースを読みやすく掲載する方法(3ページ目)

SyntaxHighlighterの使い方（ソース表示に利用する方法）

「SyntaxHighlighter」を使ってソースを表示する方法はとても簡単です。以下のようにpre要素を使ってソースを記述すれば良いだけです。その際、pre要素のclass属性の値に、各種設定を記述します。

<pre class="brush: (言語名);">
   ～ソースを掲載～
</pre>

class属性の値には、「brush: (言語名);」という形で言語名（ブラシ名）を記述します。HTML、CSS、JavaScriptの場合の例を以下でご紹介致します。

■HTMLソースを表示したい場合：

<pre class="brush: html;">
   &lt;p id="code"&gt;
      表示したいHTMLソース
   &lt;/p&gt;
</pre>

例えば、HTMLソースを表示したいなら、上記のようにpre要素のclass属性値に「brush: html」と記述します。表示例は右図の通りです。HTMLソース中で使われる「<」記号や「>」記号は、それぞれ文字実体参照を使って「&lt;」・「&gt;」と記述しておかなければなりませんので注意して下さい。

※スクリプトは、「shBrushXml.js」を読み込み済みでなければなりません。なお、XML・HTML・XHTMLはすべて1つのスクリプトで対応しているため、「shBrushHtml.js」のようなファイル名のスクリプトは存在しませんので注意して下さい。

■CSSソースを表示したい場合：

<pre class="brush: css;">
   p#code:before {
      content:"表示したいCSSソース";
   }
</pre>

CSSソースを表示したいなら、上記のようにpre要素のclass属性値に「brush: css」と記述します。表示例は右図の通りです。

※スクリプトは、「shBrushCss.js」を読み込み済みでなければなりません。

■JavaScriptソースを表示したい場合：

<pre class="brush: javascript;">
   var msg = '表示したいJavaScriptソース';
   document.getElementById("code").innerHTML = msg;
</pre>

JavaScriptソースを表示したいなら、上記のようにpre要素のclass属性値に「brush: javascript」と記述します。ソース中に不等号が含まれる場合は、文字実体参照を使って「&lt;」・「&gt;」のように記述しなければならない点に注意して下さい。表示例は右図の通りです。

※スクリプトは、「shBrushJScript.js」を読み込み済みでなければなりません。プログラミング言語の「Java」用のスクリプトである「shBrushJava.js」と間違えないよう注意して下さい。

以上で、「SyntaxHighlighter」を最低限利用することができます。

SyntaxHighlighterを使ったサンプルページ

「SyntaxHighlighter」を使ったサンプルページを用意していますので、ページを表示させたりソースを表示させたりして、記述の参考にしてみて下さい。サンプルページには、「SyntaxHighlighter」を呼び出して、HTML・CSS・JavaScriptの各ソースを表示する記述例を掲載しています。
→SyntaxHighlighterのサンプルページ

最後に、SyntaxHighlighterのカスタマイズ方法をいくつかご紹介致します。