google-code-prettifyでブログにソースコードを表示

以前にもgoogle-code-prettifyでソースコード綺麗に表示する方法に関する記事を書いたことがあります。それからLinuxとは日記では、google-code-prettifyを活用してきましたが、気がつかないうちに、随分とバージョンアップを繰り返してさらに便利になっているようです。

筆者にとって特に嬉しい機能は、elispのハイライトにも対応したということです。elispとはemacs lispの略で、Emacsを拡張するために使う言語のことです。最近はEmacsに関する記事をたくさん書いていたのですが、ブログ上でelispをハイライト表示できるツールが無かったので、非常に嬉しい知らせです。

google-code-prettifyのインストール方法は次の手順で行うことができます。

まずは、google-code-prettifyのサイトから必要なファイルをダウンロードして展開します。テスト版ではない方をダウンロードしてください。

ダウンロードして展開したフォルダの中に、prettify.jsとprettify.cssというファイルがあるはずです。この二つがgoogle-code-prettifyを使うために最低限必要なファイルです。

それ以外のファイルは、ハイライトできる言語を拡張するための、プラグインです。筆者のようにelispのソースをハイライトしたい方は、lang-lisp.jsを、cssを追加したい方は、lang-css.jsもブログなどににアップロードしてください。

アップロードが完了したらHTML側で読み込ませる必要があります。それぞれのファイルへリンクして、bodyタグにはprettyPrint()という記述を追加する必要があります。

<link href="http://what-linux.up.seesaa.net/css/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://what-linux.up.seesaa.net/js/prettify.js"></script>
<script type="text/javascript" src="http://what-linux.up.seesaa.net/js/lang-lisp.js"></script>
</head>
<body onload="prettyPrint();">
<p>これでインストールは完了です。実際に使用するときは、preタグのclassにprettyprintという文字列を入力します。さらに、手動で言語を指定したい場合は、prettyprintの後に、半角スペースを入力してlang-elというように記述します。</p> <p>ちなみに、それぞれの言語にはlang-elのような文字列が決められているのですが、それらの文字列は<a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html" target="_blank">README</a>と、各拡張ファイルに記述されています。</p> <pre class="prettyprint lang-html"> &lt;pre class="prettyprint lang-el"&gt; ;;; これでelispとしてハイライトされます &lt;/pre&gt;