Ruby on Railsでマークダウンを扱う - Redcarpet gemの使い方

はじめに

Ruby on Railsでマークダウン形式のテキストをHTMLに変換するためには、Redcarpetというgemが非常に便利です。この記事では、Redcarpetの基本的な使い方を初心者にもわかりやすく解説します。

参考URL: Redcarpet GitHub

Redcarpetとは？

Redcarpetは、マークダウン形式のテキストをHTMLに変換するためのRubyライブラリです。

Redcarpetのインストール

まずは、Redcarpetをプロジェクトに追加するために、Gemfileに以下の行を追加します。

gem 'redcarpet'

その後、ターミナルでbundle installを実行して、新たに追加したgemをインストールします。

Redcarpetの基本的な使い方

Redcarpetの核となるのはRedcarpet::Markdownクラスです。このクラスのインスタンスは、レンダラーオブジェクトに関連付けられ、Markdownクラスはドキュメントのパースを行い、関連付けられたレンダラーを使用して出力を生成します。

以下に、Redcarpetを使ってマークダウン形式のテキストをHTMLに変換する基本的なコードを示します。

require 'redcarpet'
markdown = Redcarpet::Markdown.new(Redcarpet::Render::HTML, autolink: true, tables: true)
puts markdown.render("This is *bongos*, indeed.")

このコードでは、まずRedcarpetを読み込み、次にRedcarpet::Markdownの新しいインスタンスを作成しています。このインスタンスは、Redcarpet::Render::HTMLレンダラーと、autolinkとtablesという2つの拡張機能を使用しています。最後に、renderメソッドを使用してマークダウン形式のテキストをHTMLに変換し、結果を出力しています。

Redcarpetの拡張機能

Redcarpetは、標準のマークダウンに加えて、いくつかの便利な拡張機能を提供しています。これらの拡張機能は、Redcarpet::Markdown.newの第2引数としてハッシュ形式で指定することで有効にできます。以下に、いくつかの主要な拡張機能を紹介します。

• :no_intra_emphasis: 単語の内部にある強調を解析しない。例えば、foo_bar_bazは<em>タグを生成しない。
• :tables: PHP-Markdownスタイルのテーブルを解析する。
• :fenced_code_blocks: PHP-Markdownスタイルのフェンス付きコードブロックを解析する。3つ以上の~またはバックティックで区切られたブロックは、インデントする必要なくコードとして認識される。開始フェンスの最後にはオプションで言語名を追加できる。
• :autolink: <>文字で囲まれていないリンクも解析する。http、https、ftpのプロトコルのリンクは自動的に検出される。また、メールアドレスやプロトコルなしでwwwから始まるhttpリンクも処理される。
• :strikethrough: PHP-Markdownスタイルの取り消し線を解析する。2つの~文字が取り消し線の開始を示す。例えば、this is ~~good~~ bad。

これらの拡張機能を使用することで、標準のマークダウンにはない機能を簡単に追加することができます。

もちろんです。以下に、先ほどの技術ブログ記事に具体的な使用例とコードの説明を追加したバージョンを示します。

Redcarpetの具体的な使用例

マークダウンをHTMLに変換するためのヘルパーメソッドを作成します。app/helpers/application_helper.rbに以下のようなメソッドを追加します。

module ApplicationHelper
  # RedcarpetとRedcarpet::Render::Stripを読み込む
  require 'redcarpet'
  require 'redcarpet/render_strip'

  # マークダウン形式のテキストをHTMLに変換するメソッド
  def markdown(text)
    # レンダリングのオプションを設定する
    render_options = {
      filter_html:     true,  # HTMLタグのフィルタリングを有効にする
      hard_wrap:       true,  # ハードラップを有効にする
      link_attributes: { rel: 'nofollow', target: "_blank" },  # リンクの属性を設定する
      space_after_headers: true,  # ヘッダー後のスペースを有効にする
      fenced_code_blocks: true  # フェンス付きコードブロックを有効にする
    }

    # HTMLレンダラーを作成する
    renderer = Redcarpet::Render::HTML.new(render_options)

    # マークダウンの拡張機能を設定する
    extensions = {
      autolink:           true,  # 自動リンクを有効にする
      no_intra_emphasis:  true,  # 単語内の強調を無効にする
      fenced_code_blocks: true,  # フェンス付きコードブロックを有効にする
      lax_spacing:        true,  # 緩いスペーシングを有効にする
      strikethrough:      true,  # 取り消し線を有効にする
      superscript:        true  # 上付き文字を有効にする
    }

    # マークダウンをHTMLに変換し、結果をhtml_safeにする
    Redcarpet::Markdown.new(renderer, extensions).render(text).html_safe
  end
end

このmarkdownメソッドは、マークダウン形式のテキストを受け取り、HTMLに変換して返します。html_safeメソッドを使用して、結果のHTMLが安全であるとマークします。

最後に、ビューでこのヘルパーメソッドを使用します。例えば、マニュアルの内容がマークダウン形式で@manual.contentに格納されているとすると、以下のように表示できます。

<%= markdown(@manual.content) %>

これで、マークダウン形式のテキストをHTMLに変換して表示する機能が実装できました。この機能を使用することで、ユーザーはマークダウン形式でテキストを入力し、その結果を即座にHTMLとして表示することができます。

まとめ

Redcarpetは、Ruby on Railsでマークダウン形式のテキストをHTMLに変換するための強力なツールです。基本的な使い方から拡張機能の活用、具体的な使用例まで、さまざまな機能を提供しています。この記事が、Redcarpetの使い方を理解し、自分のプロジェクトに適用する一助となれば幸いです。