概要
原著者の許諾を得て翻訳・公開いたします。
- 英語記事: Paweł Dąbrowski | Add beautiful code syntax highlighting to ...
- 原文公開日: 2018/05/30
- 著者: Paweł Dąbrowsk
Rails tips: Railsアプリにシンタックスハイライト機能を追加する（翻訳）
コードのシンタックスハイライト機能は、開発者向けブログやWebサイトでコードスニペットを表示するのになくてはならないものです。JekyllやWordPressなどのブログエンジンを使っているなら簡単にシンタックスハイライト機能を追加できますが、Railsアプリにも簡単に追加する方法があります。
今回のねらい
美しいシンタックスハイライト機能を追加すると同時に、コードをデータベースに安全に保管して簡単に編集できるようにもしてみたいと思います。必要な要件をすべてリストアップしてみました。
- コードのハイライト機能
- ハイライトのテーマを簡単に変更できること
- アプリに送信したコードを安全に保管できること
- 簡単に編集できること
- さまざまなプログラミング言語のハイライトをサポートすること
コードを安全にデータベースに保存する最も楽な方法は、markdown構文を用いることです。こうした構文であれば、ロジックの編集や改修も楽になります。
markdown
markdown構文をサポートするには、redcarpet gemのインストールが必要になります。このgemの利用法はいたってシンプルです。次の例で使い方をご覧いただけます。
Redcarpet::Markdown.new(Redcarpet::Render::HTML).render("This is *bongos*, indeed.")
上のコードから以下の出力を得られます。
<p>This is <em>bongos</em>, indeed.</p>
Gemfileには以下を追加する必要があります。
gem 'redcarpet'
続いてbundle installを実行すれば、markdown構文を用いて記事を書き、以下のコードでビューに表示できるようになります。
<%= Redcarpet::Markdown.new(Redcarpet::Render::HTML, fenced_code_blocks: true).render(@article.content).html_safe %>
シンタックスハイライト
markdown構文のサポートが片付いたので、シンタックスハイライトに集中できるようになりました。ここではrouge gemを用いることにします。このgemは、markdown構文のサポートに用いているredcarpetとの相性も完璧です。それではGemfileに以下を追加してbundle installを実行しましょう。
gem 'rouge'
お気づきかと思いますが、markdown構文のパースにはRedcarpet::Render::HTMLクラスを用いています。rougeとredcarpetを接続するには、独自のレンダリング用クラスを作成しなければなりません。/lib/blog_render.rbというファイルを作成し、そこに以下のコードを追加します。
require 'redcarpet'
require 'rouge'
require 'rouge/plugins/redcarpet'
# markdown構文向けの独自のレンダリングクラス
class BlogRender < Redcarpet::Render::HTML
include Rouge::Plugins::Redcarpet
end
続いて、新しいレンダリング用クラスをRedcarpet::Markdownの新しいインスタンスに渡す必要があります。
<%= Redcarpet::Markdown.new(BlogRender, fenced_code_blocks: true).render(@article.content).html_safe %>
fenced_code_blocksオプションによって、GitHubにありそうなコードブロックを使えるようになります。後はCSSスタイルを更新すれば完了です。私のGistにあるCSSをコピペすれば、私のブログと同じテーマで表示されるようになります。