[Middleman 3][markdown]初めてのMiddleman：RedcarpetとMiddleman::Rougeを使ったシンタックスハイライト

この記事は書かれてから1年以上経過しており、内容が古い場合があります。

前回の初めてのMiddleman：Markdown EngineをkramdownからRedcarpetに切り替えるをベースにmiddleman-rougeを使ったシンプルなシンタックスハイライトを試してみます。

Gemfile

GemfileにMiddleman::Rougeを加えます。

gem 'middleman-rouge'

config.rb

config.rbにactivate :rouge_syntaxを追記してmiddleman-rougeを有効にします。

########################
#
# Markdown setting
#
########################
# set :markdown_engine, :kramdown

set :markdown_engine, :redcarpet
set :markdown, :fenced_code_blocks => true, :smartypants => true, :with_toc_data => true, :tables => true, :autolink => true, :gh_blockcode => true

########################
#
# Code highlight
#
########################
activate :rouge_syntax

ビルド

有効にした状態で$ bundle exec middleman serverを実行するとMarkdownで記述したCode Blockがビルド時に以下のように変化します。

Middleman::Rouge 無効時

<pre><code class="ruby">print(&quot;Hello&quot;)
</code></pre>

Middleman::Rouge 有効時

<pre class="highlight ruby"><code><span class="nb">print</span><span class="p">(</span><span class="s2">"Hello"</span><span class="p">)</span>
</code></pre>