Tech Racho エンジニアの「?」を「!」に。
  • 開発

Rails tips: Railsアプリにシンタックスハイライト機能を追加する(翻訳)

概要

原著者の許諾を得て翻訳・公開いたします。

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をコピペすれば、私のブログと同じテーマで表示されるようになります。

関連記事

Slackのシンタックスハイライト付き「スニペット機能」は使わないと損


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。