前回は記事の検索機能とコメント機能を追加する方法について書きました。今回Syntax Highlightの機能を追加して、Blogサイトは完成です。
Syntax Highlightの追加
middleman-syntaxというmiddleman公式の拡張があるので、これを使います。
Gemfileにmiddleman-syntaxを追加して、bundle installを実行します。
source 'http://rubygems.org'
gem "middleman", "~> 3.2.1"
gem "middleman-blog", "~> 3.5.1"
gem "middleman-livereload"
gem "nokogiri"
gem "redcarpet"
gem "html2haml"
gem "middleman-disqus"
gem "middleman-syntax" # 追加
# For feed.xml.builder
gem "builder", "~> 3.0"$ bundle install
あとはconfig.rbでSyntax Highlightを有効化するだけです。
activate :syntax行番号を表示する場合はオプションとしてline_numbers: trueを指定します。
activate :syntax, line_numbers: trueその他の使用可能なオプションはhttp://localhost:4567/__middleman/config/で参照できます。ここではmiddleman-syntaxだけでなく、middleman本体や追加したその他の拡張機能の、設定名、説明、デフォルト値、サイトの設定が確認できます。
カラースキーマ
middleman-syntaxはRougeを使ってSyntax Highlightの機能を実装しているので、Rougeで使えるカラースキーマをそのまま使うことができます。使えるカラースキーマはThankfulEyes、Colorful、Github、 Base16、Base16::Solarized、Base16::Monokaiの6種類です。本サイトではThankfulEyesを使っています。
カラースキーマを有効化するにはsyntax_highlight.css.erbなど、拡張子を.css.erbとしたファイルを用意して、以下のようにSyntax Highlightのテーマ用のcssを生成するコードを記述します。
<%= Rouge::Themes::ThankfulEyes.render(:scope => '.highlight') %>あとはこのcssファイルを読み込むだけです。本サイトではstylesheets/modules/syntax_highlight.css.erbを用意して、他scss/cssファイルと同様にapplication.css.scssでインポートしています。
@import "modules/syntax_highlight";RougeはPython製のsyntax highlighterPygmentsと互換性があるので、上記のようにcssを生成するコードを書く代わりに、Pygments用のcss をそのまま使うこともできます。
css調整
本サイトではSyntax Highlight用のフォントにSource Code ProのLight版を使用しています。
Source Code ProはGoogle Fontsからも提供されているので、これを利用しています。
以下のようにGoogle Fontsで提供されるcssファイルをインポートします。
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:300);あとはSyntax Highlightで使用される<pre>要素とその子要素の<span>要素のfont-familyに'Source Code Pro', sans-serif;を指定するだけです。
フォント以外にも、必要に応じてpaddingなどを調整します。本サイトではSyntax Highlightのcssを以下のようにカスタマイズしています。(設定は/stylesheets/core/_base.scssに書いています。)
pre {
padding: rem-calc(12) rem-calc(10) rem-calc(12) rem-calc(10) ;
margin-bottom: rem-calc(24);
line-height: rem-calc(22);
@include border-radius(6px);
font-family: 'Source Code Pro', sans-serif;
font-weight: lighter;
span {
font-family: 'Source Code Pro', sans-serif !important;
font-weight: lighter !important;
}
}まとめ
middlemanの拡張機能を使うことで、簡単にSyntax Highlightの機能をサイトに追加することができました。これでBlogサイトが完成したので、あとは本番環境へのデプロイを残すのみとなりました。次回は作成したBlogサイトをAmazon S3でホスティングする方法について書きたいと思います。