初めての Middleman シリーズ初めてのMiddleman：Middleman-Syntaxを使ったシンタックスハイライト

前回はRedcarpetとMiddleman::Rougeを使ったシンタックスハイライトを試しましたが、今回はMiddleman-Syntaxプラグインを試してみます。

Gemfile

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

gem 'middleman-syntax'

config.rb

Middleman-SyntaxもRougeを使っているのでMarkdownエンジンをredcarpetにすることができます。config.rbにactivate :syntaxを追記してmiddleman-syntaxを有効にします。

########################
#
# 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 :syntax

ビルド

Middleman::Rougeと同様にMarkdownのコードブロックをシンタックスハイライトすることができますがMiddleman-SyntaxはERBのヘルパーが用意されておりMarkdown以外でもシンタックスハイライトを表示することができます。

<% code("ruby") do %>
def my_cool_method(message)
  puts message
end
<% end %>

def my_cool_method(message)
  puts message
end

カラーリング

Middleman-SyntaxのカラーリングはMiddleman::Rougeよりも簡単です。Middleman-SyntaxはERBからCSSを作り、下記のようにカラーリング用のCSSを読み込ませます。

syntax.css.erb

<%= Rouge::Themes::ThankfulEyes.render(:scope => '.highlight') %>

カラーリングには7つのテーマが用意されています。

• ThankfulEyes
• Colorful
• Github
• Base16
• Base16::Solarized
• Base16::Monokai
• Monokai

Monokaiに変更した場合はこうなります。

<%= Rouge::Themes::Monokai.render(:scope => '.highlight') %>

Middleman::Rougeよりも使い勝手が良いですね。 以上Middleman-Syntaxでした。

次回：初めてのMiddleman：Middleman-Blogで記事毎に画像を管理する方法

シリーズ

1. 初めてのMiddleman：rbenv, bundler 環境でMiddlemanを使ったHello World
2. 初めてのMiddleman：レイアウト機能でレイアウトとコンテンツを分離する
3. 初めてのMiddleman：パーシャルを使ったコンテンツのモジュール化
4. 初めてのMiddleman：SCSSのコンパイルとテンプレートの基礎
5. 初めてのMiddleman：Sass MixinライブラリのBourbon, Neatを導入してみる
6. 初めてのMiddleman：データファイルとデータファイルを使った動的ページ生成
7. 初めてのMiddleman：サイトにブログ機能を追加する
8. 初めてのMiddleman：Amazon S3にビルドされたファイルを同期する
9. 初めてのMiddleman：HTML/CSS/JS/画像をビルド時に圧縮する
10. 初めてのMiddleman：設定について
11. 初めてのMiddleman：静的サイトのキャッシュとasset_hash拡張を使ったキャッシュのパージ
12. 初めてのMiddleman：Middleman::S3Syncで使うAWS IAMユーザーのアクセスキー管理方法について
13. 初めてのMiddleman：Helperを使ってGravatarのアイコンを表示する
14. 初めてのMiddleman：アセットパイプラインを使った外部アセットファイルの読み込みと結合
15. 初めてのMiddleman：Bowerを使ってjQueryなどのライブラリをロードする
16. 初めてのMiddleman：スケルトンを自作する方法
17. 初めてのMiddleman：Middleman Blogの記事データを使いやすく管理する方法
18. 初めてのMiddleman：Middleman-blogのシングルブログを前提としたSkeletonを作った
19. 初めてのMiddleman：Middleman-blogでマルチブログを試してSkeletonを作った
20. 初めてのMiddleman：Markdown EngineをkramdownからRedcarpetに切り替える
21. 初めてのMiddleman：RedcarpetとMiddleman::Rougeを使ったシンタックスハイライト
22. 初めてのMiddleman：Middleman-Syntaxを使ったシンタックスハイライト
23. 初めてのMiddleman：Middleman-Blogで記事毎に画像を管理する方法
24. 初めてのMiddleman：Gulpを使ってサムネイル画像を生成する
25. 初めてのMiddleman：Middleman-OGPのOGP画像指定を相対パスで設定する
26. 初めてのMiddleman：Middleman-OGPでMiddleman-BLogにOGPを設定する
27. 初めてのMiddleman：Middleman-Titleでタイトルタグを手軽に設定する
28. 初めてのMiddleman：多言語化 - 言語ファイルの作成とヘルパーの埋め込み
29. 初めてのMiddleman：Middleman-blogにカテゴリやシリーズなどのカスタムコレクションを追加する方法
30. 初めてのMiddleman：Bowerで管理されているフォントファイルをインポートする