JavaScriptを使ったソースコードの色付けスクリプト

google-code-prettify
google-code-prettify

技術系のホームページを作っているとソースコードを載せたくなることも多いと思います。そのままソースコードの文字列を表示してもいいですが、キーワードがハイライトされていると綺麗ですし、見易いですね。ということで、今回はgoogle-code-prettifyというJavaScriptのスクリプトを紹介したいと思います。

google-code-prettifyの使い方

http://code.google.com/p/google-code-prettify/downloads/listからprettify-small-1-Jun-2011.tar.bz2をダウンロードして適当なディレクトリに展開

http://code.google.com/p/google-code-prettify/downloads/list
http://code.google.com/p/google-code-prettify/downloads/list

HTMLファイルに下記のタグを追加

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

<body>を下記のように書き変える注1

<body onload="prettyPrint()">

色付けしたいソースコードを下記のタグで囲む

<pre class="prettyprint">...</pre>

もしくは

<code class="prettyprint">...</code>

ソースコードの言語は自動判定されますが、手動で設定したい場合は下記のように記述することもできます。

<pre class="prettyprint lang-html">...</pre>

google-code-prettifyを使ったサンプルサイト

http://code.rlated.net/google-code-prettify/
http://code.rlated.net/google-code-prettify/

注1 最終的にprettyPrint関数が実行されればよいので<body>タグにonloadを追加する以外の方法でも問題ありません。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です