google-code-prettifyによるシンタックスハイライト

公開日:
更新日:
0Webデザイン

シンタックスハイライトとは

シンタックスハイライト(Syntax highlighting)とは、以下のようにソースコードの主要なキーワードがハイライトされる機能です。このようにシンタックスハイライトされたソースコードは、明瞭で美しいものになります。


public class Hello {
  public static void main (String [] args) {
    System.out.println ("Hello, world!"); // ・ω・)ノ Hello, world!
  }
}
 Javaでの一般的なHello world

このようなハイライトを手動で行おうとすると非常に手間がかかるため、プログラムにより自動でハイライトができれば効率的です。自動でハイライトしてくれるツールはWeb上にはいくつも公開されており、google-code-prettifyもその1つです。

google-code-prettifyのダウンロード

google-code-prettifyは、以下のWebサイト(英語サイト)からダウンロードできます。

google-code-prettify

ダウンロードファイルは、"prettify-small-4-Mar-2013.tar.bz2" と "prettify-4-Mar-2013.tar.bz2" の2種類がありますが、"prettify-small-4-Mar-2013.tar.bz2"を選択します。google-code-prettifyに修正を加えたい場合は、"prettify-4-Mar-2013.tar.bz2"を選択します。


google-code-prettify
google-code-prettify

google-code-prettifyのファイル構成

ダウンロードしたファイルは".bz2"というWindowsではあまり使われない拡張子でアーカイブされていますが、対応するソフトで解凍します。解凍後、以下のファイルが展開されますが、基本的には "prettify.css""prettify.js" の2ファイルだけでも問題ありません。(29, 30行目)


2013/3/5    lang-apollo.js        988 byte
2013/3/5    lang-basic.js         516 byte
2013/3/5    lang-clj.js         1,446 byte
2013/3/5    lang-css.js           868 byte
2013/3/5    lang-dart.js          947 byte
2013/3/5    lang-erlang.js        583 byte
2013/3/5    lang-go.js            283 byte
2013/3/5    lang-hs.js            579 byte
2013/3/5    lang-lisp.js          774 byte
2013/3/5    lang-llvm.js          358 byte
2013/3/5    lang-lua.js           553 byte
2013/3/5    lang-matlab.js     19,700 byte
2013/3/5    lang-ml.js          1,106 byte
2013/3/5    lang-mumps.js         887 byte
2013/3/5    lang-n.js           1,402 byte
2013/3/5    lang-pascal.js        713 byte
2013/3/5    lang-proto.js         302 byte
2013/3/5    lang-r.js             696 byte
2013/3/5    lang-rd.js            268 byte
2013/3/5    lang-scala.js         916 byte
2013/3/5    lang-sql.js         1,802 byte
2013/3/5    lang-tcl.js           635 byte
2013/3/5    lang-tex.js           286 byte
2013/3/5    lang-vb.js          1,791 byte
2013/3/5    lang-vhdl.js        1,450 byte
2013/3/5    lang-wiki.js          544 byte
2013/3/5    lang-xq.js         23,242 byte
2013/3/5    lang-yaml.js          412 byte
2013/3/5    prettify.css          675 byte
2013/3/5    prettify.js        14,551 byte
2013/3/5    run_prettify.js    16,682 byte

langから始まるJavaScriptファイルは、プログラム言語別にハイライトするための予約語をまとめたファイルです。そのため、Webサイトに記載するプログラム言語に応じて必要なJavaScriptファイルの読み込みを行います。

google-code-prettifyの使い方

google-code-prettifyの使い方は、"prettify.css""prettify.js" を配置し、preタグにクラス名 "prettyprint" を指定し、"prettyPrint()" を実行すればOKです。


<html>
  <head>
    <link rel="stylesheet" href="prettify.css">
  </head>
  <body>
    <pre class="prettyprint">
      ここにコードを書きます
    </pre>
    <script src="prettify.js"></script>
    <script>prettyPrint();</script>
  </body>
</html>
 google-code-prettifyを使う最小構成例

行番号を表示する場合は、preタグにクラス名 "linenums" を追加で指定します。


    <pre class="prettyprint linenums">
      ここにコードを書きます
    </pre>
 google-code-prettifyで行番号を表示させるクラス("linenums")指定

任意の行番号から始める場合は、"linenums" に開始する行番号を付与します。


    <pre class="prettyprint linenums:100">
      100行目から開始する
    </pre>
 google-code-prettifyで任意の行番号から始める

google-code-prettifyの基本的な設定はこれで完了です。 以降はカスタマイズなので、設定は任意となります。

ハイライトのカラーリングをカスタマイズする

シンタックスの文字色は、"prettify.css" で定義されています。そのため、"prettify.css" をカスタマイズすることでカラーリングを変更できます。また、以下のWebサイトで配布されているテーマ(prettify.css)をダウンロードし、置き換えることで簡単にカラーリングを変更することも可能です。


Color themes for Google Code Prettify

Color themes for Google Code Prettify
Color themes for Google Code Prettify

フォントをカスタマイズする

ソースコードを掲載する場合、通常の文章とは異なるフォントを使用することでデザイン性が向上します。ソースコードのフォントは、読み間違えやすい文字("I", "l", "1", "|" や "O", "0" や "j", "i" 等)を見分けやすい視認性に優れた等幅フォントが好まれます。本サイトでは、Adobeが無料公開している"Source Code Pro"を使用しています。フォントは好みが分かれますが、以降は、"Source Code Pro" を例に説明しています。


The quick brown fox jumps over the lazy dog. 0123456789
Source Code Pro

Webフォントを使用する

WebフォントはCSS3から導入された仕様で、ユーザの端末にインストールされていないフォントでも、Webサーバ上に配置したフォントを表示させることができます。"Source Code Pro" は再配布も認められているため、様々なサイトからダウンロードできます。


GitHub - Adobe Fonts Source Code Pro

ダウンロードしたフォントをWebサーバに配置し、CSSに "@font-face" として指定します。urlに指定するパスやファイル名は、自身の環境に合わせて変更して下さい。


@font-face {
  font-family: 'SourceCodePro-Regular';
  src: url('SourceCodePro-Regular.otf.woff') format('woff'),
       url('SourceCodePro-Regular.ttf.woff') format('truetype');
}

pre {
  font-family:'CodePro-Regular';
}
 Webフォントの利用例

上記の例では "WOFF(Web Open Font Format)" のみ指定しています。多くのモダンブラウザは "WOFF" をサポートしていますが、レガシーブラウザでは "WOFF" をサポートしていません。レガシーブラウザにもWebフォントを表示させる場合は "EOT(Embedded OpenType)" や "SVG(Scalable Vector Graphics)" 等を指定する必要があります。

Google Web Fontsを使用する

Google Web Fontsはフォントは、Webサーバにフォントを配置しなくとも、Googleのサーバを参照することで任意のフォントを表示することができます。"Source Code Pro" は Google Web Fonts にも公開されており、"linkタグ" に対象フォントのURLと "font-family" にフォント名を指定することで利用できます。


Google Fonts - Source Code Pro

<html>
  <head>
    <link rel="stylesheet" href="prettify.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Code+Pro">
  </head>
  <body>
    <pre class="prettyprint" style="font-family:'Source Code Pro';">
      ここにコードを書きます
    </pre>
    <script src="prettify.js"></script>
    <script>prettyPrint();</script>
  </body>
</html>
 Google Web Fontsの利用例