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のシンタックスハイライト付き「スニペット機能」は使わないと損

デザインも頼めるシステム開発会社をお探しならBPS株式会社までどうぞ 開発エンジニア積極採用中です! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

hachi8833

Twitter: @hachi8833、GitHub: @hachi8833 コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。 これまでにRuby on Rails チュートリアル第2版の監修および半分程度を翻訳、Railsガイドの初期翻訳ではほぼすべてを翻訳。その後も折に触れて更新翻訳中。 かと思うと、正規表現の粋を尽くした日本語エラーチェックサービス enno.jpを運営。 実は最近Go言語が好きで、Goで書かれたRubyライクなGoby言語のメンテナーでもある。 仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。

hachi8833の書いた記事

夏のTechRachoフェア2019

週刊Railsウォッチ

インフラ

ActiveSupport探訪シリーズ