Google Code Prettifyの概要

Google Code Prettify（以下Prettify）はソースコードを読みやすく色分けします。

Google Code Prettifyの読み込み

PrettifyはCDNを使って読み込むことができます。次のコードで関連するスクリプトとスタイルシートを一括して読み込みます。

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

コードの指定

修飾したいコードをPREタグやCODEタグで囲い、そのクラスにprettyprintを追加します。

console.log('Hello World')

実行例は次の通りです。

See the Pen Google code-prettifyでソースコードを読みやすく色分けする（CDN） by jun (@zionboogie) on CodePen.

URLクエリパラメータを使ったオプション指定

URLクエリパラメータを使ってオプションを指定することができます。

クエリパラメータ	デフォルト	説明
autoload	true	trueかfalseを指定します。trueの場合、ページの読み込み時に、自動的に実行されます。
lang	none	読み込みたい言語ハンドラを指定します。通常、その言語のファイル拡張子です。複数回（?lang=css&lang=ml）指定することもできます。
skin	none	スキンを指定できます。詳しくはテーマで確認してください。
callback	none	code-prettifyの処理終了時に実行したいコールバック関数を指定できます。複数回指定可能です。

たとえば次のパラメータはCSS言語拡張機能を読み込み、スキンにSunburstを指定しています。

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

テーマの指定

code-prettifyはテーマをいくつか用意しているので、下記のテーマページを参考にして好みの見た目を選んでください。

Gallery of themes for code prettify

行番号を表示

クラスにlinenumsを追加すると行番号を表示することができます。

<pre class="prettyprint linenums">
console.log('Hello World')
console.log('Hello World')
console.log('Hello World')
console.log('Hello World')
console.log('Hello World')
</pre>

1行ごとに行番号を表示したい場合はCSSでlist-style-typeにdecimalを指定してください。

.prettyprint ol.linenums > li {
	list-style-type: decimal; 
}

行番号の開始業を指定する場合はlinenumsの後にコロンを挟んで数値で指定します。15行目から始めたい場合は次のようにlinenums:15と指定します。

console.log('Hello World')
console.log('Hello World')
console.log('Hello World')
console.log('Hello World')
console.log('Hello World')

コード言語の指定

code-prettifyはCやPython、JavaScriptなどの多くの言語で動作しますが、言語を明示的に指定することができます。
現在提供されている言語は次の通りです。

default	Prettifyが自動的に判別します。
lang-none	Explicitly do not use any syntax highlighting.
Bashなどのシェルスクリプト	lang-bash, lang-bsh, lang-csh, lang-sh
C, C++など	lang-c, lang-cc, lang-cpp, lang-cxx, lang-cyc, lang-m
C#	lang-cs
Clojure	lang-clj
CoffeeScript	lang-coffee
CSS	lang-css
Dart	lang-dart
Delphi	lang-pascal
Erlang	lang-erl, lang-erlang
Go	lang-go
Haskell	lang-hs
HTML	lang-html
Java	lang-java
JavaScript	lang-js, lang-javascript
JSON	lang-json
LaTeX と TeX	lang-latex, lang-tex
Lisp と Scheme	lang-cl, lang-el, lang-lisp, lang-lsp, lang-scm, lang-ss, lang-rkt
Lua	lang-lua
OCaml, SML, F#, et al	lang-fs, lang-ml
Pascal	lang-pascal
Perl	lang-pl, lang-perl
PHP	lang-php
Protocol buffers	lang-proto
Python	lang-py, lang-python, lang-cv
R and S	lang-r, lang-s
Regex	lang-regex
Ruby	lang-rb, lang-ruby
Rust	lang-rc, lang-rs, lang-rust
Scala	lang-scala
SQL	lang-sql
VHDL	lang-vhdl, lang-vhd
Visual Basic	lang-vb, lang-vbs
XML	lang-xml

code-prettifyのソースコードやドキュメントは次のリポジトリにあります。

google / code-prettify

詳しい使い方はdocs/gettting_started.mdを参照してください。

Getting Started

スクリプトとスタイルをダウンロードして、自分で提供することができます。

<link rel="stylesheet" type="text/css" href="prettify.css">
<script src="prettify.js"></script>

ページのロードが完了したら、PR.prettyPrint()メソッドを実行します。

window.addEventListener("load", function(event) {
	PR.prettyPrint()
});