【ハウツー】ハイライトもGoogle流 - "google-code-prettify"でソースコードに色付けを (2) どんな言語でも簡単に色付けできる! | エンタープライズ

急上昇ワード

[

]

【ハウツー】

ハイライトもGoogle流 - "google-code-prettify"でソースコードに色付けを

2 どんな言語でも簡単に色付けできる!

後藤大地　 [2007/03/27]

印刷

先頭
前へ
- 1
- 2
- ／2

google-code-prettifyで色付けのサンプル

ではgoogle-code-prettifyを使ったシンタックスハイライトのサンプルを掲載しておく。たとえばリスト4のようにHTML文書を用意してやれば、図1のように表示される。これはJavaの場合だ。

リスト4 Javaソースコードを掲載する場合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Code Prettifier</title> <script src="src/prettify.js" type="text/javascript"></script> <link href="src/prettify.css" rel="stylesheet" type="text/css"/> </head> <body onload="prettyPrint()"> <h1>Java</h1> <pre class="prettyprint">import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class OpenSessionServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { // セッションを開始。trueが指定されている場合、セッション // インスタンスが作成されていない場合には新しく作成される HttpSession session = request.getSession(true); // セッションインスタンスに count, 0 というデータを保存 session.setAttribute("count", 0); } } </pre> </body>

図1 Javaソースコードの場合、Webブラウザからはこのように色付けされたソースコードが見える

JavaScriptならリスト5が図2のようになる。ソースコードがそのままコピーして使えるあたりが便利だ。

リスト5 JavaScriptソースコードを掲載する場合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Code Prettifier</title> <script src="src/prettify.js" type="text/javascript"></script> <link href="src/prettify.css" rel="stylesheet" type="text/css"/> </head> <body onload="prettyPrint()"> <h1>JavaScript</h1> <pre class="prettyprint">var Dachshund = function() { this.name='サラ'; } Dachshund.prototype = new Dog() var dh = new Dachshund() // ダックスフントオブジェクトのプロトタイプを上書き Dachshund.prototype.name = 'ポチ' dh.bark() // ↑'ばうわう' と表示 // dhオブジェクトのプロパティを上書き dh.bark = function() { alert('くぅーん'); } dh.bark() // ↑'くぅーん' と表示 // 再度ダックスフントオブジェクトのプロトタイプを上書き Dachshund.prototype.bark = function() { alert('きゃんきゃん'); } dh.bark() // ↑'くぅーん' と表示 // dhオブジェクトのbarkプロパティを削除 delete dh.bark // プロトタイププロパティを削除 delete Dachshund.prototype.bark delete Dog.prototype.bark </pre> </body>

図2 JavaScriptの場合、Webブラウザからはこのように色付けされたソースコードが見える

google-code-prettifyが対応しているソースコードはC、C++、Java、Javascript、Python、Ruby、PHP、Perl、Bash、Awk、Makefiles、HTML、XML、CSSなど。一方、コメントの慣例のためにSmalltalk、LispやCAMLライクなプログラミング言語のソースコードでは正しく動作しない。厳密にその言語でなくとも、対応しているプログラミング言語と記述方法が似ていれば動作する。たとえばshならリスト6が図3のようになる。

リスト6 shソースコードを掲載する場合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Code Prettifier</title> <script src="src/prettify.js" type="text/javascript"></script> <link href="src/prettify.css" rel="stylesheet" type="text/css"/> </head> <body onload="prettyPrint()"> <h1>sh</h1> <pre class="prettyprint">for target do WORKDIR=$(mktemp -d "$EXTRACTHOMEDIR"/XXXXXX) case "$target" in *.[Tt][Gg][Zz]|*.[Tt][Aa][Rr].[Gg][Zz]|*.[Tt][Aa][Rr].[Zz]) tar vzxf "$target" -C "$WORKDIR" move_to_currentpath "$WORKDIR" "$target" ;; *.[Tt][Bb][Zz]|*.[Tt][Aa][Rr].[Bb][Zz]2) tar vjxf "$target" -C "$WORKDIR" move_to_currentpath "$WORKDIR" "$target" ;; *.[Gg][Zz]) gzip -d "$target" move_to_currentpath "$WORKDIR" "$target" ;; *.[Zz][Ii][Pp]|*.[JjWw][Aa][Rr]) check_required_program unzip /usr/ports/archivers/unzip/ unzip "$target" -d "$WORKDIR" move_to_currentpath "$WORKDIR" "$target" ;; *.[Ll][Zz][Hh]) check_required_program lha /usr/ports/archivers/lha/ lha ew="$WORKDIR" "$target" move_to_currentpath "$WORKDIR" "$target" ;; *) echo "unkown compress type: $target" ;; esac rm -r -f "$WORKDIR" done </pre> </body>

図3 shの場合、Webブラウザからはこのように色付けされたソースコードが見える

一点だけ注意する必要があるのは「<」と「>」だ。「<」と「>」はそのまま解釈されるので、HTML文書にコピーしたあとで「<」と「>」に変換しておく必要がある。たとえばXML文書を掲載する場合は、リスト7のように「<」「>」を「<」「>」に変換しておく。こうしていけば図4のようにハイライトされたXML文書が表示されるようになる。

リスト7 XMLテキストを掲載する場合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Code Prettifier</title> <script src="src/prettify.js" type="text/javascript"></script> <link href="src/prettify.css" rel="stylesheet" type="text/css"/> </head> <body onload="prettyPrint()"> <h1>XML</h1> <pre class="prettyprint"><?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi=">http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4"> <servlet> <servlet-name>OpenSessionServlet</servlet-name> <servlet-class>OpenSessionServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>OpenSessionServlet</servlet-name> <url-pattern>/OpenSession</url-pattern> </servlet-mapping> </web-app> </pre> </body>

図4 XML文書の場合、Webブラウザからはこのように色付けされたテキストが見える

コイツはなかなか便利!

google-code-prettifyの動作確認が実施されたWebブラウザはIE 6、Firefox 1.5/2、Safari 2.0.4とされている。使っているWebブラウザでgoogle-code-prettifyが動作するかはgoogle-code-prettifyの動作テストページを開いてチェックするといいだろう。

google-code-prettifyでは、使い方が難しくなるという理由で、色付けする対象のテキストの種類を指定する方法は用意されていない。対象のテキストは自動的に判定されて色付けが実施されるようになっている。

google-code-prettifyは厳密に色付けするためのライブラリとはいえないが、とりあえずWebに掲載するソースコードやテキストをハイライトするには便利なモジュールだ。基本的に数行編集するだけで済む。ソースコードやテキストのハイライトを実施したいと考えているユーザは一度google-code-prettifyを使ってみてほしい。