JavaScriptテックラボ

Google Code Prettifyでソースコードを読みやすく色分けする

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()
});

関連記事