2009/10/31

google-code-prettifyを使えるようにしてみた

class Voila {
public:
  // Voila
  static const string VOILA = "Voila";

  // will not interfere with embedded tags.
}

はじめにgoogle-code-prettifyプロジェクトドキュメントを眺める。
レンタルサーバにgoogle-code-prettifyのファイルを置こうかと思ったけど、 Learning Log Book: Bloggerでシンタックス・ハイライト で紹介されていたHTML/JavaScriptガジェットを使う方法でやってみた。
やり方は、HTML/JavaScriptガジェットを追加して、タイトルは空欄、コンテンツにJavaScriptのソース(prettify.jsと必要ならlang-xxx.jsとかも)とCSS(prettify.css)を貼り付けるというだけ。HTML/JavaScriptガジェットをこんな風に使うのかと感心。



あとはページのHTMLの編集でbody要素にonload="prettyPrint()"を追加すると、<pre class="prettyprint">...</pre>や<code class="prettyprint">...</code>のコードが色付けされて表示される。
"<"と">"は実体参照で書かなきゃいけないことに注意(というか面倒くさい、使わないかもという気がしてくる)。

あなたのソースコードを彩る、Syntax Highlighterまとめ | Blog.37to.netgoogle-code-prettify以外にもいろいろと紹介していて参考になった。
その中でSyntaxHighlighterは対応言語が多くて良さそう。特に、Usageによるとバージョン2.1では<script type="syntaxhighlighter" class="brush: js"><![CDATA[...]]></script>というようにscript要素+CDATAを使うからコードをそのまま貼り付けることができることと、Hostingで「http://alexgorbatchev.com/pub/sh/にファイルを置いておくからこれを使っていいよ」とホストすることをはっきり書いてくれていること。

というのも、google-code-prettifyのSVNリポジトリのソースを読み込む方法を紹介しているページを見かけてそれってどうかのかなと思った。
すくなくともgoogle-code-prettifyのREADMEでは「you will need to make sure the css and js file are on your server」と書かれている。そのあたりの議論があった/あるのか知らないし、Project Hosting on Google Code がOKを出しているかもしれないけど。

SyntaxHighlighterみたいにライブラリの開発者がホストすると表明してくれると使いやすいし、よく使われるようになりやすいかも。
GoogleやYahooのAJAXライブラリのホスティング(AJAX Libraries API - Google Code, The YUI Configurator)に追加されたら最高だろうな。

0 件のコメント: