はじめに
google-code-prettify は HTML ページに含まれるソースコードのキーワードなどに色を付けて見やすくするためのライブラリです。
他にも同様の JS ライブラリがありますが、google-code-prettify は設置が簡単なのが特徴です。(その一方、多機能ではありません)
ソースコードやドキュメントは次のリポジトリからダウンロードできます。詳しい使い方は gettting_started.md を参照してください。
(注意) 以前の Google のサイトから変更になりました。
関連ページ
要点
この手のライブラリ(ソースのカラー表示)の使い方としては一番簡単です。
- script タグを使って https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js をロードする。
- カラー表示するソース部分を pre タグで囲み class="prettyprint" を指定する。
- ソース内の < や & をエスケープする。
Google Code Prettify のロード
スクリプトとスタイルシートのロードは、次のようにすることで一括して行えます。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
ソースコード部分の指定
修飾するソースコード部分の指定は下のように行います。
<pre class="prettyprint">
source code here
</pre>
サンプル
JavaScript (Node.js) のソース表示例です。
HTML ソース全体は下のようになります。
<doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Google Code Prettify</title>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
</head>
<body style="margin-left:5%; margin-right:5%;">
<h1>Google Code Prettify</h1>
<hr />
<p>JavaScript (Node.js) のソース表示例です。</p>
<pre class="prettyprint">
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
/* GET /about */
router.get('/about', function(req, res, next) {
res.render('about', { title: 'バージョン情報', version: "0.1" });
});
/* GET /value/:n */
router.get('/value/:n', function(req, res, next) {
res.render('value', { title: "パラメータ付きのルート", n: req.params.n});
});
module.exports = router;
</pre>
</body>
</html>
その他
やったことないですが、次のようなこともできるようです。詳しくは、 docs/getting-started 参照。
- 言語の指定(ハンドリング)
- スキンの指定
- プリティプリントが終了したことのJavaScript通知
- 独自 JS と CSS の使用
- スタイリングの指定
- 言語のヒント
- 行番号の付加
終わり