google-code-prettifyは、ソースコードをきれいに表示してくれるJavaScriptのライブラリです。

一番簡単な使い方は、次のコードを追加します。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

クラス名が「prettyprint」である要素の内容を色づけしてくれます。

このブログでは、次のようにしてpreタグのクラス名に「prettyprint」を設定して、google-code-prettifyで色づけしています。

<script type="text/javascript">
        var elements = document.getElementsByTagName("pre"); 
        for (var i = 0; i < elements.length; i++) {
            elements[i].className = "prettyprint";
        }
</script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>