Rainbow

あまり使う機会ない感じですが、デモページ作るのにシンタックスハイライトを入れたので導入メモ。

 

JSかjQueryで探して、google-code-prettifyかSyntaxHighlight.inが有名どころっぽかったけど、サイトが良い感じでいじりやすそうなRainbowというのを使いました。

 

サイトに行って使う言語をチェックして非圧縮/圧縮版をDL
ちなみにどっちもDLした方が後がラクかなと思います。

 

非圧縮版見てみるといっぱい入ってると思いますが、基本的に表示させたいだけなら圧縮版のrainbow-custom.min.jsとテーマのcss（all-hallows-eve.cssとか）を読み込めばおーけーです。
圧縮版のみDLした方はgithubにテーマcssが置いてあります。

 

書き方は、

<code data-language="html">
</code></pre>
<h1>hoge</h1>
<pre><code data-language="html">
</code>

 

という感じで、data-languageで言語指定して中身を書きます。
各言語のデモなど詳細はgithubからDLしたzipの中 rainbow-master > demos にあります。
テーマcssはあまりピンとこなかったのでgithub.cssをベースにいじりました。