Google Code Prettifyを使用すると、簡単にコードを構文やキーワードによって色付け（シンタックスハイライト）して表示してくれます。
Google Code Prettifyの使い方
下記を読み込んで、使用できるようにしていきます。
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&lang=html&lang=javascript&skin=sunburst"></script>URLクエリパラメータを使ってオプションを指定
URLクエリパラメータを使用することで、オプションを指定することができます。
| クエリパラメータ | デフォルト | 説明 |
|---|---|---|
| autorun=(true, false) | true | trueかfalseを指定します。trueの場合、ページの読み込み時に、自動的に実行されます。 |
| lang= | none | 読み込みたい言語ハンドラを指定します。通常、その言語のファイル拡張子で、複数指定することもできます。（例:?lang=css&lang=ml）。言語リストはこちらを参照。 |
| skin= | none | シンタックスハイライトのスキン（テーマ）を指定できます。詳しくはこちら。 |
| callback= | none | code-prettifyの処理終了時に実行したいコールバック関数を指定できます。処理終了時に window.exports["xxxx"] が呼ばれます。 |
下記は、言語ハンドラにCSSを指定して、スキンにsunburstを指定した例です。
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&skin=sunburst"></script>行番号を追加する
行番号を表示するには、prettyprintにlinenumsというクラスを追加します。
<pre class="prettyprint linenums">
// ここにソースコードを記述
</pre>デフォルトでは、１行ごとに行番号が表示されないので、１行ごとに番号を表示されたい場合はCSSで下記のように指定します。
.prettyprint ol.linenums > li {
list-style-type: decimal;
/* または */
list-style-type: decimal-leading-zero;
}コードの言語を指定
Google Code Prettifyは自動的に色分けをしてくれますが、言語を明示的に指定してより適切に表示することができます。
言語を明示的に指定する場合は、言語によっては言語ハンドラ（その言語を表示するためのファイル 例：lang-css.js）を読み込んでおく必要があります。
<pre class="prettyprint lang-html">
The lang-* class specifies the language file extensions.
File extensions supported by default include:
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl".
</pre>