Google code-prettifyの使い方

Google code-prettifyとは、HTMLやJava、SQLなどのコードスニペットをCSSとJavaScriptを使って見やすく色分けして表示させるシンタックスハイライターです。この記事では、その使い方をサンプルを交えて紹介します。

使い方

Google code prettifyの使い方は、自動ローダの読み込みとコードスニペットの表示の2つの手順に分かれる。

自動ローダの読み込み

HTML文書に次のスクリプトタグを含める。

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

このスクリプトタグは、CDNからgoogle-code-prettifyのJavaScriptを読み込むことを意味している。

コードスニペットの表示

HTMLのPREタグまたはCODEタグにprettyprintクラスを指定する。

<pre class="prettyprint">
...
</pre>

行番号

コードスニペットに行番号を表示させるには、PREタグまたはCODEタグにprettyprintクラスに加えて、linenumsクラスを指定する。

<pre class="prettyprint linenums">
...
</pre>

なお、行番号は5行毎に表示される。

テーマ

Google code prettifyには、さまざまなテーマが用意されている。テーマを利用することで、コードスニペットの見栄えを変えることができる。テーマを使用するには、自動ローダのURLにパラメータ「skin」を追加する。

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

skinパラメータには、次のテーマを指定できる。

HTML

google-code-prettifyによるHTMLのコードスニペット表示例を示す。

<html>
  <head>
    <title>google-code-prettify</title>
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
  </head>
  <body>
    <h1>Google code prettify</h1>
    <p>google-code-prettifyの表示例</p>
    <pre class="prettyprint linenums">
      code
    </pre>
  </body>
</html>

Java

google-code-prettifyによるJavaのコードスニペット表示例を示す。

package com.segakuin.example;

public class Example {
  public static void main(String[] args) {
    System.out.println("Hello, world.");
  }
}

SQL

google-code-prettifyでSQLのコードスニペットを表示させるには、SQLのコードを小文字で書かなければならない。SQL文を大文字で書くと、ハイライト表示されない。

SQLの表示例を示す。

select
  empno
from
  emp
where
  deptno = 20;