2011-11-08

Google Code PrettifyのSCSSの言語ハンドラー

SCSS (Sassy CSS)をGoogle Code Prettifyでシンタックス・ハイライトできるようにする言語ハンドラーを作ってみました。元々Google Code Prettifyがそれほど強力なシンタックス・ハイライトを提供しているわけではない上、ベースにしたCSSの言語ハンドラーがそもそもしょぼいのでイマイチな感じですが、コメントとat-rule系が見やすくなるのでまぁ及第点じゃないかなと。

Demo: Test page for lang-scss.js

ダウンロードはデモ・ページのGistへのリンクからどうぞ。テスト用のSCSSコードは@terkelが作ってくれました。パッチーズ・ウエルカム。

使い方はlang-css.jsと同じでGoogle Code Prettifyを読み込んだあとlang-scss.jsを読み込むようにします。このサイトのようにまとめて圧縮したりしても良いでしょう。

<script src="http://example.com/js/prettify.js"></script>
<script src="http://example.com/js/lang-css.js"></script>
<script src="http://example.com/js/lang-scss.js"></script>

自動判別は多分失敗するのでHTMLでSCSSのコードであることを明示してやる必要があるでしょう。

<pre><code class="language-scss">...</pre>

でももうブログ程度のWebサイトにはシンタックス・ハイライトはいらないかなーとはちょっと思いますね。jsFiddleやGitHubのような長めのコードを読むためのWebサイトならともかく、そこらのブログにある数行のコードのフラグメントを読む時にシンタックス・ハイライトが助けになることはまずないでしょう。加えて多数の色を使うということがデザインに与えるデメリットはなかなかのものなので、メリットよりデメリットの方が実は大きいのかな、と。