jQuery Chili 2.2 から行番号を表示できるようになりました

jQuery Chili のレシピを静的ロードする方法

こういう状況のときは、jQuery Chili の動的ロードを無効にして、あらかじめレシピを指定しておくという対策ができます。この対策を説明したサイトが見つからなかったので、ここでお伝えします。

以前に紹介した jQuery Chili ですが、新しく 2.2 にバージョンアップして、行番号を表示できるようになりました。

行番号の表示は class を指定して、いろいろとコントロールできる のですが、次のとおり、オプションを指定すると、class を指定することなく行番号を表示できます。

ChiliBook.lineNumbers = true;

このブログにもさっそく適用してみました。jQuery Chili 2.2 に差し替えて、lineNumbers オプションを有効にしました。過去のエントリも不都合なく行番号が表示できています。

jQuery Chili のレシピを静的ロードする方法

jQuery Chili 2.0 は、シンタックスハイライトのレシピを php.js や js.js のように外部ファイル化しています。そして、そのファイルが必要になる時点で、次のように jQuery.getJSON メソッド (XHR) を使って動的ロードし、code 要素に適用しています。

$.getJSON( path, function( recipeLoaded ) {
book.recipes[ path ] = recipeLoaded;

自らのサイトに WEB ページと jQuery Chili をホストするときは不都合ないのですが、この blogspot.com のようなブログの WEB ページに対して、他でホストした jQuery Chili を使おうとすると、XHR のクロスドメイン制約のために、前述のレシピを動的ロードできずエラーになります。

こういう状況のときは、jQuery Chili の動的ロードを無効にして、あらかじめレシピを指定しておくという対策ができます。この対策を説明したサイトが見つからなかったので、ここでお伝えします。

次のように jquery.chili-2.0.js の後に recipes.js を指定してロードします。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javaScript" src="chili/jquery.chili-2.0.js"></script>
<script type="text/javaScript" src="chili/recipes.js"></script>

recipes.js は、次のようになっています。recipeLoading プロパティを false にして、レシピの動的ロードを無効にしています。そして、php.js、html.js、js.js、css.js のように、レシピのファイル名をキーに、レシピの記述をそのまま指定しています。

ChiliBook.recipeLoading = false;
ChiliBook.recipes[ "php.js" ] = { ... };
ChiliBook.recipes[ "html.js" ] = { ... };
ChiliBook.recipes[ "js.js" ] = { ... };
ChiliBook.recipes[ "css.js" ] = { ... };

recipes.js には PHP、HTML、JavaScript、CSS のレシピが指定してあります。 不要なレシピがあれば削除してしまえばよく、別なレシピが必要であれば、レシピのファイル名をキーに、そのレシピのファイルの内容を指定すればよいです。レシピのファイルは JSON 形式になっているので、上記の { ... } の部分を置き換えるだけです。