Google Code Prettifyを使用すると、簡単にコードを構文やキーワードによって色付け(シンタックスハイライト)して表示してくれます。

Google Code Prettifyの使い方

下記を読み込んで、使用できるようにしていきます。

HTML

<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を指定した例です。

HTML

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&skin=sunburst"></script>

行番号を追加する

行番号を表示するには、prettyprintにlinenumsというクラスを追加します。

HTML

<pre class="prettyprint linenums">
// ここにソースコードを記述
</pre>

デフォルトでは、1行ごとに行番号が表示されないので、1行ごとに番号を表示されたい場合はCSSで下記のように指定します。

CSS

.prettyprint ol.linenums > li {
  list-style-type: decimal; 
  /* または */
  list-style-type: decimal-leading-zero;
}

コードの言語を指定

Google Code Prettifyは自動的に色分けをしてくれますが、言語を明示的に指定してより適切に表示することができます。

言語を明示的に指定する場合は、言語によっては言語ハンドラ(その言語を表示するためのファイル 例:lang-css.js)を読み込んでおく必要があります。

HTML

<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>