ソースコードの記述(pre要素とscript要素)

広告

SyntaxHighlighterを使って見やすく表示されるソースコードをWebページやブログの記事でどのように記述するのかについて解説します。pre要素またはscript要素を使用します。

1.pre要素を使う
2.script要素を使う

最初にpre要素を使用する場合です。次のように記述します。

<pre class="brush:言語名">
・・・
ソースコードを記述
・・・
</pre>

pre要素のクラス名に「brush:言語名」を記述します。言語名のところに記述するのは、前のページの表で「Brush aliases」のところに記述されているものです。「Brush aliases」のところに複数記述されている場合はその中の1つを記述します。例えばJavaの場合は次のように記述します。

<pre class="brush:java">
・・・
ソースコードを記述
・・・
</pre>

他の言語の場合でいくつかの例を記述します。

Ruby       : <pre class="brush:ruby"></pre>
PHP        : <pre class="brush:php"></pre>
JavaScript : <pre class="brush:js"></pre>
HTML       : <pre class="brush:html"></pre>

他にも指定可能なオプションがありますが、こちらは別のページで解説します。

注意点

pre要素を使う場合、pre要素の中で記述される「<」は全て「&lt;」に変換して記述する必要があります。「>」を「&gt;」、「&」を「&amp;」については必須ではありません。

サンプル

では実際に試してみます。かなり省略してありますが次のようにHTMLページの中でJavaのソースコードを記述しました。テーマは「Default」を使用します。

<html>
<head>
<script src="http://www.howtonote.jp/css/sh/scripts/shCore.js"></script>
<script src="http://www.howtonote.jp/css/sh/scripts/shBrushJava.js"></script>
<link rel="stylesheet" href="http://www.howtonote.jp/css/sh/css/shCoreDefault.css" type="text/css" />
<script type="text/javascript">
  SyntaxHighlighter.all();
</script>
</head>
<body>

<pre class="brush:java">
/**
 * The HelloWorldApp class implements an application that
 * simply prints "Hello World!" to standard output.
 */
class HelloWorldApp {
    public static void main(String[] args) {
        System.out.println("Hello World!"); // Display
    }
}
</pre>

</body>
</html>

HTMLページをブラウザで表示すると先ほどのJavaのソースコードはSyntaxHighlighterによって次のように表示されます。

/**
 * The HelloWorldApp class implements an application that
 * simply prints "Hello World!" to standard output.
 */
class HelloWorldApp {
    public static void main(String[] args) {
        System.out.println("Hello World!"); // Display
    }
}

他のテーマでどう表示されるのかは別のページで試します。

次にscript要素を使用する場合です。次のように記述します。

<script type="syntaxhighlighter" class="brush:言語名"><![CDATA[
・・・
ソースコードを記述
・・・
]]></script>

type属性に「syntaxhighlighter」を指定して下さい。そしてpre要素と同じくscript要素のクラス名に「brush:言語名」を記述します。言語名のところに記述するのは、前のページの表で「Brush aliases」のところに記述されているものです。例えばJavaの場合は次のように記述します。

<script type="syntaxhighlighter" class="brush:java"><![CDATA[
・・・
ソースコードを記述
・・・
]]></script>

pre要素と同じく指定可能なオプションがありますが、こちらは別のページで解説します。

注意点

script要素を使う場合、pre要素のように「<」を「&lt;」に変換する必要はありません。ただし「]]>」を記述する場合は「]]&gt;」、「</script>」を記述する場合は「&lt;/script>」に変換して記述する必要があります。

またブログサービスを利用している場合、script要素は記述しても無視されるかエラーになる場合があります。その場合はpre要素を使って下さい。

サンプル

では実際に試してみます。かなり省略してありますが次のようにHTMLページの中でJavaのソースコードを記述しました。テーマは「Default」を使用します。

<html>
<head>
<script src="http://www.howtonote.jp/css/sh/scripts/shCore.js"></script>
<script src="http://www.howtonote.jp/css/sh/scripts/shBrushJava.js"></script>
<link rel="stylesheet" href="http://www.howtonote.jp/css/sh/css/shCoreDefault.css" type="text/css" />
<script type="text/javascript">
  SyntaxHighlighter.all();
</script>
</head>
<body>

<script type="syntaxhighlighter" class="brush:java"><![CDATA[
/**
 * The HelloWorldApp class implements an application that
 * simply prints "Hello World!" to standard output.
 */
class HelloWorldApp {
    public static void main(String[] args) {
        System.out.println("Hello World!"); // Display
    }
}
</script>

</body>
</html>

HTMLページをブラウザで表示すると先ほどのJavaのソースコードはSyntaxHighlighterによって次のように表示されます。

表示のされ方はpre要素とscript要素で違いはありません。

( Written by Tatsuo Ikura+ )