シンタックスハイライト・ライブラリprismjsの使い方メモ
アシアル情報教育研究所・所長の岡本です
このサイト（あんこエデュケーション）では、サンプルプログラムを紹介することが多いため、ソースコードの「シンタックスハイライト」を行うためのライブラリとしてprismjsを導入いたしました。
導入はしたものの、使い方をすぐに忘れてしまうのでメモを残すことにします。
HTMLをシンタックスハイライトする
ソースコード全体をpreとcodeのタグで囲みます。
また、codeタグにclass属性を付与して属性値に「language-html」を指定します。
記述例
<pre class="line-numbers"><code class="language-html">
<h1>あんことは！</h1>
</code></pre>
表示例
<h1>あんことは！</h1>
行番号の表示方法
上記の例では行番号がでています、これはprismjsの追加プラグインの機能です。
prismjsを設置する際にをプラグインとしてインストールすれば利用可能となります。
pre要素のクラス名として”line-numbers”を指定することで表示できます。
行番号を任意の番号から開始したい場合にはpre要素にdata-start属性を付与し、属性値で数字を指定します。
記述例
<pre class="line-numbers" data-start=999><code class="language-html">
<h1>あんことは！</h1>
</code></pre>
表示例
<h1>あんことは！</h1>
CSSをシンタックスハイライトする
ソースコード全体をpreとcodeのタグで囲みます。
また、codeタグにclass属性を付与して属性値に「language-css」を指定します。
記述例
<pre class="line-numbers"><code class="language-css">
body {
margin: 0;
padding: 0;
}
</code></pre>
表示例
body {
margin: 0;
padding: 0;
}
JavaScriptをシンタックスハイライトする
ソースコード全体をpreとcodeのタグで囲みます。
また、codeタグにclass属性を付与して属性値に「language-JavaScript」を指定します。
記述例
<pre class="line-numbers" data-start=1><code class="language-JavaScript">
alert("最中が食べたい！");
</code></pre>
表示例
alert("最中が食べたい！");
（おまけ）cssとjavascriptが含まれたHTMLをハイライトした場合の例
記述例
<!Doctype html>
<html>
<head>
<script>
alert("あんこ！");
</script>
<style>
h1 {
color:red;
}
</style>
</head>
<body>
<h1>もなか</h1>
</body>
</html>
表示例
<!Doctype html>
<html>
<head>
<script>
alert("あんこ！");
</script>
<style>
h1 {
color:red;
}
</style>
</head>
<body>
<h1>もなか</h1>
</body>
</html>
