JavaScript

設置が一番簡単な google-code-prettify でソースコードを読みやすく

More than 1 year has passed since last update.

はじめに

google-code-prettify は HTML ページに含まれるソースコードのキーワードなどに色を付けて見やすくするためのライブラリです。
他にも同様の JS ライブラリがありますが、google-code-prettify は設置が簡単なのが特徴です。(その一方、多機能ではありません)

ソースコードやドキュメントは次のリポジトリからダウンロードできます。詳しい使い方は gettting_started.md を参照してください。

google / code-prettify

(注意) 以前の Google のサイトから変更になりました。

関連ページ

JS ハイライト表示ライブラリ3種

要点

この手のライブラリ(ソースのカラー表示)の使い方としては一番簡単です。

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) のソース表示例です。

google-code-prettify.png

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 の使用
  • スタイリングの指定
  • 言語のヒント
  • 行番号の付加

終わり