2013-08-19

Prism vs. Google Code Prettify

Prismを使ってるウェブサイトが増えてきたなーと感じる。Google Code Prettifyで困ってないというか既存のものの中では最もバランスが良いと思っているので、あまり乗り換える気はない。が、「Only 2KB」を謳うPrismのサイズの小ささには惹かれる。

Prismの本体は素の状態で7.5KBほどと小さい(縮小してgzipすると2KB)。素のGoogle Code Prettifyが62KBあることを考えると圧倒的な差だ。けどその差はコメント量とビルトインで構文強調の定義があるかどうかの違いに過ぎないようだ。試しにGoogle Code Prettifyがサポートしている言語にPrismを対応させるような感じにすると25KBほどになった。そういえばhighlight.jsとかもあったなーと思い出したので、ついでにこれも含めて比較してみる。

UglifyJSを通すとGoogle Code Prettifyの大量のコメントが消え、なんと逆転した。Only 2KBに騙された感じある。ここからのgzipではほとんど差は出ないし、どちらも言語定義は正規表現のため新たな言語定義の追加でも差は出ることはない。双方の強調機能に少し差があることを考慮しても、Prismが特に小さいということはないようだ。

ただPrismの優位性はコアのサイズだけではなく、必要な言語定義を必要なだけ導入できる所などにもある。新しい言語定義もGoogle Code Prettifyのそれと比較して格段に書きやすい。サイズのメリットはあまりないことがわかってしまったが、コンパクトに抑える努力が可能なPrismに乗り換えたい気もする。……んだけど、ちょっとこのサイトに合わせて作り込もうとしたらすごく面倒だった。

まず、言語定義の依存があるため、自前で連結しようとすると順番をきっちり考えなくてはならなくて面倒臭い。また、HTMLやXMLの構文強調はmarkupでまとめられているので、language-htmlというクラス名を振っても構文強調されない。クラス名を書き直すか、以下の様な簡単な言語定義を書いて読み込む必要がある。

Prism.languages.html = Prism.languages.markup;
Prism.languages.xml = Prism.languages.markup;
Prism.languages.svg = Prism.languages.markup;

更には付加するクラス名が一般的なものすぎる上、Prismが通った証拠みたいなものがはっきりと残らない(Google Code Prettifyがprettyprintedというクラス名を振ってくれるみたいなのがない)ので、セレクターで[class*="language-"]とか.token.commentみたいな書き方をしなくてはならない。

しばらくはGoogle Code Prettifyから乗り換えることはなさそう。言語定義書きやすいのは本当に良いんだけどな。