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

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

シンタックスハイライト (Syntax highlighting) とは、以下のようにソースコードの主要なキーワードがハイライトされる機能です。テキストエディタや Visual Studio や eclipse などの統合開発環境ではお馴染みの機能です。このようにシンタックスハイライトされたソースコードは、明瞭で美しいものになります。

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

しかし、HTML では自動的にキーワードをハイライトで強調する機能が存在しません。このようなハイライトを手動で行うと非常に手間がかかるため、プログラムにより自動でハイライトする方法が一般的です。自動でハイライトするプログラムは無料でいくつも公開されており、google-code-prettify もそのひとつです。

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

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

外部リンク

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

ダウンロードした code-prettify-master.zip ファイルを展開するといくつものファイルが含まれていますが、すべてを使用するわけではありません。zip ファイルの中には説明用のテキストやデモ用の HTML などが含まれており、最小構成で使用する場合は distrib フォルダに含まれている prettify-small.zip のみ使用します。prettify-small.zip の中にもいくつかファイルがありますが、基本的には "prettify.css" と "prettify.js" の 2 ファイルだけでも問題ありません。

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

google-code-prettify の使い方

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

<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)をダウンロードし、置き換えることで簡単にカラーリングを変更することも可能です。

外部リンク
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

Webフォントを使用する

WebフォントはCSS3から導入された仕様で、ユーザの端末にインストールされていないフォントでも、Webサーバ上に配置したフォントを表示させることができます。"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" にフォント名を指定することで利用できます。

外部リンク
<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の利用例