【Rails】マークダウン形式で入力された表をHTML側で表として表示してみた

どうもこんにちは。

今回は以下のように入力されたマークダウン形式の表をHTML側では表として表示できるようにしてみたいと思います。

| タイトル | 値 |
| --- | --- |
| 名前 | テスト太郎 |
| 年齢 | 25 |
| 性別 | 男 |
| 出身 | 東京都 |

実装手順

1. gemを導入

今回はRedcarpetというGemを使用します。

gem 'redcarpet'

2. bundle installをする

ターミナルで以下のコマンドを叩きます。

$ bundle install

3. ApplicationHelperを使用してメソッドを定義

メソッドは、HTMLで画面表示したい時に使用するので、ヘルパーメソッドとして定義します。
私は色々な箇所で使用したかったので、app/helper/application_helper.rbに定義しましたが、usersの機能でのみ使用する場合などは、app/helper/users_helper.rbに定義すればOKです。

def markdown_to_html(markdown_text)
    # markdown_textがnilの場合には、空文字を返す（エラーが出ちまうので）
    return '' if markdown_text.nil?
    # インスタンスを作成
    renderer = Redcarpet::Render::HTML.new
    markdown = Redcarpet::Markdown.new(renderer, tables: true)
    # マークダウンテキストをHTML形式に変換
    markdown.render(markdown_text).html_safe
end

4. HTMLでメソッドを呼び出し

テキストを引数にしてメソッドを呼び出します。
仮に、@sampleにデータが入っているとし、@sample.textでtextカラムにマークダウン形式で入力された文字列が入っているとします。

<%= markdown_to_html(@sample.text) %>

テーブルをカスタムしたい場合

簡単でしたね！

私はテーブルにボーダーを付けたかったので、Initializerを使用して別クラスを継承して定義しました。

1. Initializerにファイルを作成

config/initializerディレクトリにcustom_redcarpet.rbというファイルを作成します。（ファイル名は適当）

2. クラスを継承して定義

custom_redcarpet.rbに以下を記述します。

class CustomRedcarpet < Redcarpet::Render::HTML
  def table(header, body)
    "<table class=\"markdown-table-bordered\">#{header}#{body}</table>"
  end
end

これでマークダウン形式の表をHTML形式の表に変換するときに、tableタグにmarkdown-table-borderedというクラスが付与されるようになりました。

3. ヘルパーメソッドを変更

先ほど作成したヘルパーメソッドを変更します。

def markdown_to_html(markdown_text)
    return '' if markdown_text.nil?
    # ここを変更
    renderer = CustomRedcarpet.new
    markdown = Redcarpet::Markdown.new(renderer, tables: true)
    markdown.render(markdown_text).html_safe
end

4. markdown-table-borderedクラスを定義

application.cssにスタイルを定義します。

.markdown-table-bordered {
  border-collapse: collapse;
  width: 100%;
}

.markdown-table-bordered th {
  border: 1px solid #ddd;
  background-color: #ddd;
  padding: 8px;
  text-align: left;
}
.markdown-table-bordered td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

5. Railsサーバーを再起動

Railsサーバーを再起動しないと、CSSとInitializerは読み込まれないです。忘れずに。

これで表が綺麗な表として表示されます！

タイトル	値
名前	テスト太郎
年齢	25
性別	男
出身	東京都

以上