BiB/iのプリセット機能でシンタックスハイライト
先日BiB/iさんがアップデートされまして、いろいろ機能追加になったんですが、その中に「EPUB 内の HTML に任意の外部 CSS / JavaScript を追加可能」が！
BiB/i | EPUB Reader on Your Web Site. — ビビ。EPUB リーダを、あなたのウェブサイトに。
http://sarasa.la/bib/i/
これでいろいろしようという人間は限られてると思いますが、個人的には非常に欲しかった機能なのでちょっと試してみます。この機能の可能性が感じられるんじゃないかと思います。
そのまえに、２年ほど前のネタ。Oreillyの電子版(EPUB)はDRMフリーで編集可能なのでFUSEeを使ってシンタックスハイライトを追加して読みやすくしようというもの。いい感じなんだけども以外と手間がかかる。
しかし、BiB/iの新機能「ページに任意のCSS/Javascriptを追加する機能」を使えばEPUBを編集しないでもこれが可能になるのですよ！（※残念ながらブラウザにより制限ありですが）
※Google Chromeではiframe内のDOMを動的に変更した場合に反映されなかったり。Firefoxでは動く模様。
では、以下BiB/iのプリセット機能でシンタックスハイライト本編です。
以下が追加前、コードと地の文が混じっていてちょっと読みにくい。
以下が、今回の完成物、EPUBは編集せずシンタックスハイライトを追加しています。
利用するのはスライド資料と同じ、Google Code Prettify。手軽で言語指定がいらないのが良い感じ。
https://code.google.com/p/google-code-prettify/
こちらのJavascriptとCSSを使いますが、CSSについてはテーマギャラリーにあるのをちょっと修正して使います。
また、prettify.jsにもO'reillyの文章中のコード部分をPrettifyするためのしかけをちょっと追加します。
programlistingというクラスのあるpreタグにprettyprintというクラスを追加しておき、pretifyを実行するようにします。完成物は以下のGistのprettify.jsを参照。
https://gist.github.com/shunito/9c0d2fbf3312d0a4d879
そして、この２つのファイルを読み込むようにBiB/iのpresetファイルを作成します。
場所は以下「~/bib/presets/」デフォルトのdefault.jsをコピーして、oreilly.jsを作成します。
ついでにGoogle Code Prettifyのコードは「bibi」と同じ階層に「gcp」というディレクトリを作っていれておきましょう。Presetファイルの説明はここの「readme.txt」に書かれてますが、外部ファイルの読み込みは以下を設定すれば良いです。今回はこんな感じ。
"epub-additional-stylesheet" : "/gcp/prettify.css", "epub-additional-script" : "/gcp/prettify.js",
で、EPUBを読み込むときにこのプリセットを使うには、以下のように読み込み側でURLに指定します。
「#bibi(preset:プリセットファイル名)」をつけるわけですね。
<p><a href="bib/i/index.html?book=JavaScriptPocketReference#bibi(preset:oreilly.js)">JavaScriptPocketReference</a></p>
同じOreillyのEPUBもHTMLの仕様が違う可能性がありますので、全部OKとはいかないと思いますが
、一度このプリセットを作成しておけば、ほかのOreilly本を開くときにもこれを指定すれば自動的にシンタックスハイライトが起動します。URLをブックマークに入れておけばいつでもブラウザ経由読めるので非常に便利ですね。
