code-prettifyとは、HTMLやJava、SQLなどのコードスニペットをCSSとJavaScriptを使って見やすく色分けして表示させるシンタックスハイライターです。この記事では、その使い方をサンプルを交えて紹介します。prettifyの使い方は、自動ローダの読み込みとコードスニペットの表示の2つの手順に分かれる。自動ローダの読み込みHTML文書に次のスクリプトタグを含める。src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>このスクリプトタグは、CDNからgoogle-code-prettifyのJavaScriptを読み込むことを意味している。Networkの略で、世界中に分散化されたWebサーバから構成されるコンテンツ配信ネットワークを利用して、Webサイトにアクセスしようとするユーザに最も近いWebサーバからコンテンツが配信される仕組みです。コードスニペットの表示HTMLのPREタグまたはCODEタグにprettyprintクラスを指定する。class="prettyprint">...</pre>行番号コードスニペットに行番号を表示させるには、PREタグまたはCODEタグにprettyprintクラスに加えて、linenumsクラスを指定する。linenums">...</pre>なお、行番号は5行毎に表示される。prettifyには、さまざまなテーマが用意されている。テーマを利用することで、コードスニペットの見栄えを変えることができる。テーマを使用するには、自動ローダのURLにパラメータ「skin」を追加する。src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>skinパラメータには、次のテーマを指定できる。desertsunburstsons-of-obsidiandoxyHTMLgoogle-code-prettifyによるHTMLのコードスニペット表示例を示す。</body></html>Javagoogle-code-prettifyによるJavaのコードスニペット表示例を示す。}}SQLgoogle-code-prettifyでSQLのコードスニペットを表示させるには、SQLのコードを小文字で書かなければならない。SQL文を大文字で書くと、ハイライト表示されない。SQLの表示例を示す。