Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

Google Code Prettify

Jan282009
Vote:
http://bizcaz.com/archives/2009/01/28-222615.php
Categories: JavaScript
Tags: Google Code Prettify
Social Bookmark

Prev Page: JavaScript フレームワークに依存しないアコーディオンエフェクト（Animated JavaScript Accordion）

こんばんわ^^

良さそうなスクリプト見つけたよ (●´∀｀●)
以前、HTML や CSS、JavaScript など各書式に合った整形をしてくれる dp.SyntaxHighlighter というものをご紹介したことがあります。

dp.SyntaxHighlighter

それと似たようなもので、Google Code Prettify というものを見つけました。

google-code-prettify - Google Code

スクリプトのサイズがメッチャ小さいので非常に軽いのが特徴かな。

サンプルを表示できませんでした。

対応する言語は以下の通りです。

bash
C、C++
JavaScript
HTML、XML
CSS
Python
Ruby
PHP
Perl
SQL
この他にもいろいろあります。

以降で使い方をカンタンに説明します。

使い方

使い方はカンタンです。JavaScript フレームワークにも依存してませんので、jQuery、prototype 問わず使用できそうです。

まず上記ページから圧縮ファイルをダウンロードします。
prettify-small-8-Jan-2009.zip という方がサイズが小さくっていいと思います。

そして、各自の環境に合わせてサーバにアップロードします。
たとえば、わたしのサイトでは google-code-prettify/ というフォルダを新規作成してその中にアップロードしました。
次に HTML ヘッダ( <head> ～ </head> )内に以下を追加します。
ライブラリのロード
1. <link rel="stylesheet" type="text/css" href="http://●●●.com/prettify.css" />
2. <script src="http://●●●.com/prettify.js" type="text/javascript"></script>
3. <script src="http://●●●.com/lang-css.js" type="text/javascript"></script>
4. <script src="http://●●●.com/lang-hs.js" type="text/javascript"></script>
5. <script src="http://●●●.com/lang-lisp.js" type="text/javascript"></script>
6. <script src="http://●●●.com/lang-lua.js" type="text/javascript"></script>
7. <script src="http://●●●.com/lang-ml.js" type="text/javascript"></script>
8. <script src="http://●●●.com/lang-proto.js" type="text/javascript"></script>
9. <script src="http://●●●.com/lang-sql.js" type="text/javascript"></script>
10. <script src="http://●●●.com/lang-wiki.js" type="text/javascript"></script>
11. <script src="http://●●●.com/lang-vb.js" type="text/javascript"></script>
青字の部分を各自の環境に合わせて変更します。
その際、不要な言語のライブラリは削除します。必要な分だけ記述してください。

たとえば、JavaScript のコードをハイライト表示したいなら prettify.js だけでいいみたい。
以下の言語をハイライト表示したい場合に限り別途ライブラリをロードする必要があるようです。
- CSS
- Haskell
- LUA
- OCAML
- SML
- F#
- Visual Basic
- SQL
- Protocol Buffers
- WikiText
同じく HTML ヘッダ内に以下のコードを追加します。
Google Code Prettify の実行 for jQuery
1. $(document).ready(function() {
2. prettyPrint();
3. });
上記は jQuery を使ってる人向けの記述の仕方です。
prototype なら以下のようになります。
Google Code Prettify の実行 for prototype
1. Event.observe(window, 'load', function() {
2. prettyPrint();
3. });
結局ロードイベント時に prettyPrint() を実行してあげればいいようです (￣∇￣)b
最後に以下のようにマークアップします。
CSS の場合のマークアップ
1. <pre>
2. <code class="prettyprint lang-css">
3. ：
4. ：
5. </code>
6. </pre>
青字のように、prettyprint というクラス名称は必須で、lang-css のように適用する言語を指定してあげます。
JavaScript なら lang-js、HTML なら lang-html といった具合に。