Google Code Prettify を使う

Google Code Prettify は、HTML 文書上で様々なプログラミング言語のコード断片を綺麗に表示するための JavaScript ライブラリです。

Google Code Prettify の組み込み方

HTML 文書のヘッダに

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

のように入れてあげるだけで、CDN 経由で Google Code Prettify が読み込まれます。

コード断片の書き方

コード断片の箇所では、

<pre class="prettyprint">
public static void main(final String[] args) {
  System.out.println("Hello, World!");
}
</pre>

のように <pre> ブロックを作ってあげれば、OKです。以下のような表示になります。

public static void main(final String[] args) {
  System.out.println("Hello, World!");
}

言語は自動判別されますが、うまく判別されないなどの理由で直接指定したい場合は class="prettyprint lang-lisp" のように指定できます。
また、class="prettyprint linenums" とすると、行番号が表示されます。

見た目のカスタマイズ

行番号は標準では5行ごとにしか表示されませんが、毎行表示したい場合は以下のように CSS 定義を上書きします。

<style>
.prettyprint ol.linenums > li {
  list-style-type: decimal; 
}
</style>

このブログのスタイルでは、1行が長いときに横に突き抜けてしまったので、横スクロールバーが出るように、以下のスタイルも加えました。

<style>
pre.prettyprint {
  white-space: pre;
  overflow: auto;
}
</style>