DocPad のシンタックスハイライト用プラグイン

ブログとかでソースコードを書くときにシンタックスハイライトができると見ためよろしくすることができる。DocPadにはdocpad-plugin-highlightjs というシンタックスハイライトのプラグインがあるのでその導入について。

インストール

terminal.app を立ち上げ、プロジェクトフォルダ内で下記コマンドを入力すればインストール完了。

$ npm install --save docpad-plugin-highlightjs

node_modules フォルダ内に docpad-plugin-highlightjs が入っているはず。

シンタックスハイライト用CSS

You can preview some of them here. からお好みのシンタックスハイライトを探す。
いい感じのものが見つかったらAvailable stylesheets are here. から目的のcssをとってくる。
それをDocPadのプロジェクトファイル（layoutとかhtmlとか）で下記の用にcssを読み込ませる。

<link rel="stylesheet" href="/css/ir_black.css" />

ソースコード書いてみる

<pre><code> 〜 </code></pre>

という感じで、pre要素・code要素内にソースコードを書く。
例えば

<pre><code>
<p>hogehoge</p>
</code></pre>

とても簡単。一度お試しあれ。