Nanoc+Markdownでコードのシンタックスハイライト

NanocではColorizeSyntaxフィルターを使うことでコードの色づけができる。
codeタグのクラスを「language-<言語名>」のように指定すると、その言語用に色付けされる。

<code class="language-ruby">

が、Markdownで書いているとタグにclassを当てることができない。
そこでフィルターを書いてみた。
lib/default.rbに書いてもいいし、適当にファイルを分けてもいい。

module Nanoc3::Filters
  class CodeWithLanguage < Nanoc3::Filter
    def run(content, params={})
      content.gsub(/<pre><code>@@@(.+)/, '<pre><code class="language-\1">')
    end
  end
  Nanoc3::Filter.register '::Nanoc3::Filters::CodeWithLanguage', :code_with_language
end

ShowOffと同じようにコードブロックの一行目を「@@@<言語名>」と書くと、codeにクラスが当たってシンタックスハイライトが効くようにしてみた。

これをRulesでColorizeSyntaxフィルターよりも前に適用する。

compile '*' do
  if item.binary?
    # don’t filter binary items
  else
    filter :erb
    filter :redcarpet
    filter :code_with_language
    filter :colorize_syntax,
           :colorizers => {},
           :coderay => { :css => :style }

    layout 'default'
  end
end

Markdown文書内では以下のように書く。

    @@@ruby
    # -*- coding: utf-8 -*-
	class Hoge
	  def hige
	    "hoge-hige"
	  end
    end

きちんとシンタックスハイライトされる。
フィルター素晴らしい。

ColorizeSyntaxについて

シンタックスハイライトを行うフィルター。
デフォルトではCodeRayでシンタックスハイライトを行うが、他にPygmentsHiligntといったシンタックスハイライターを使うこともできる。

参考

ColorizeSyntaxを使わずにKramdownの機能でシンタックスハイライトしてしまうこともできるらしい。

自分はRedcarpetを使っているので無理だけど。
ちなみにRedcarpetを使っているのは改行したところに<br>を入れられるのと、いざというときカスタマイズが楽そうだから。

次の記事

NanocでScssを使う