Prism.js - the Syntax Highlighter
このページでは Prism.js を導入して、コードを読みやすくする工夫をしています。
JavaScript の導入
<!-- Prism.js 本体 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/themes/prism.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/components/prism-core.min.js"></script>
<!-- 言語を自動で識別するプラグイン -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/plugins/autoloader/prism-autoloader.min.js"></script>
<!-- 行数を表示するプラグイン -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/plugins/line-numbers/prism-line-numbers.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<!-- 前後の改行を無視するプラグイン -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>
記述
ハイライトしたいコードを次のタグで挟み込みます。
<pre>
<code class="lang-LANGUAGE">
ハイライトしたいコード
</code>
</pre>
さらに行数を表示したい場合は次のようなクラスを追加します。
<pre class="line-numbers">
<code class="lang-LANGUAGE">
ハイライトしたいコード
</code>
</pre>