SyntaxHighlighter | SyntaxHighlighterの基本 | ソースコードの記述（pre要素とscript要素）
SyntaxHighlighterを使って見やすく表示されるソースコードを、Webページやブログ記事でどのように記述するかを説明する。pre要素とscript要素を使用する。
pre要素を使用する
まずpre要素の使用方法について説明する。記述形式は次のとおりである。
<pre class="brush:言語名">
...
ソースコードを記述
...
</pre>
pre要素のクラス名にbrush:言語名を記述する。言語名には、前のページの言語表にあるBrush aliasesを記述すればよい。Brush aliasesが複数ある場合は、そのうちの1つを記述する。たとえばJavaScriptの場合は次のように記述する。
<pre class="brush:js">
...
ソースコードを記述
...
</pre>
他の言語の例をいくつか挙げると、次のようになる。
Ruby : <pre class="brush:ruby"></pre>
PHP : <pre class="brush:php"></pre>
Java : <pre class="brush:java"></pre>
HTML : <pre class="brush:html"></pre>
このほかにも指定できるオプションがあり、別のページで説明する。
注意事項
pre要素を使用する場合、pre要素内に記述する<はすべて<に変換して記述する必要がある。>を>に、&を&に変換する必要はない。
実習
では実際に試してみる。次のようにHTMLページでJavaのソースコードを記述する。テーマはDefaultを使用する。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
</head>
<body>
<h1>SyntaxHighlighter</h1>
<pre class="brush:java">
/**
* The HelloWorldApp class implements an application that
* simply prints "Hello World!" to standard output.
*/
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
</pre>
</body>
</html>
コードを実行すると、JavaのソースコードがSyntaxHighlighterによって表示されることを確認できる。
script要素を使用する
次にscript要素の使用方法について説明する。記述形式は次のとおりである。
<script type="syntaxhighlighter" class="brush:言語名">
<![CDATA[
...
ソースコードを記述
...
]]>
</script>
script要素のtype属性にsyntaxhighlighterを指定する。そしてpre要素と同じように、script要素のクラスにbrush:言語名を記述する。言語名には、前のページの言語表にあるBrush aliasesを記述すればよい。たとえばJavaScriptの場合は次のように記述する。
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
...
ソースコードを記述
...
]]>
</script>
pre要素と同様に指定できるオプションがあり、別のページで説明する。
注意事項
script要素を使用する場合、pre要素のように<を<へ変換する必要はない。ただし、]]>を記述する場合は]]>に、</script>を記述する場合は</script>に変換して記述する必要がある。
また、ブログサービスを利用する場合、script要素を記述しても無視されたりエラーが発生したりすることがある。その場合はpre要素を使用する。
実習
では実際に試してみる。次のようにHTMLページでJavaのソースコードを記述する。テーマはDefaultを使用する。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
</head>
<body>
<h1>SyntaxHighlighter</h1>
<script type="syntaxhighlighter" class="brush:java">
<![CDATA[
/**
* The HelloWorldApp class implements an application that
* simply prints "Hello World!" to standard output.
*/
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
]]>
</script>
</body>
</html>
コードを実行すると、JavaのソースコードがSyntaxHighlighterによって表示されることを確認できる。