今回の記事は、Railsにマークダウンを実装する方法を紹介しようと思います。
今回使うのはライブラリ(Gem)の「redcarpet」です。
前置きはさておき早速始めましょう。
Railsに「redcarpet」を使ってMarkdownを実装
Gemのインストール
Gemfileに「gem ‘redcarpet’」を追加して、「bundle install」してください。
Helper作成/追加
次に「app/helpers/」ディレクトリ配下に、「markdown_helper.rb」というファイルを作成します。そして作成したファイルに以下のような設定を書きます。
markdown_helper.rb
今回設定した内容は以下のような内容です。
| option | どのようなoptionか |
|---|---|
| filter_html | htmlを出力しない |
| hard_wrap | マークダウンの中の空行をhtmlに置き換える |
| space_after_headers | 題名を表すハッシュ(#)と文字の間にスペースが必要 |
| extension | どのようなextensionか |
|---|---|
| autolink | <>で囲まれていなくてもリンクを認識する |
| fenced_code_blocks | フェンスのあるコードブロックを認識する |
| lax_spacing | HTMLブロックを空行で囲む必要はない |
| no_intra_emphasis | 単語中の強調を強調と認識しない |
| strikethrough | ~(チルダ)2つで取り消し線を表現する |
| superscript | の後ろが上付き文字になる(文章が少し上に表示される) |
| tables | テーブルを認識する |
これで、Railsの中でマークダウンを使う準備ができたました。
次の段階としてScaffoldを使い簡易的なプロジェクトを作成し、その中でマークダウンを使ってみましょう。
Scaffoldで試してみる
- scaffoldを実行
- マイグレーションを実行
- show.html.erbを編集
- new/edit.html.erbで呼ばれる。_form.html.erbのtext_areaのサイズを大きくする
- 試しにマークダウンを書いてみる
ここまで実行すると、すでにマークダウンが表示できるようになっています。
newフォームからマークダウンで文章を書いて、「create」しましょう。その際デフォルトのテキストエリアだと小さいので、サイズを変更して大きくします。
今回の場合は、text_areaのオプションで「size」というものがあるので、利用しましょう。
ここまできたら自分でマークダウンを書いてみて、どのような具合か「showページ」で確認しましょう！
マークダウンの記法が曖昧な方は以下の記事を参考にしてみてください。
まとめ
Railsで「文章を入力するようなアプリ」を作るときに、マークダウンで文章を入力できるようにしたい場合があるかと思いました。
マークダウンで文章を入力できると、意外と便利なのです。そのようなニーズに応えるためにも、今回紹介した「redcarpet」を使って実装してみてください。
他にもマークダウンのシンタックスハイライトを支援する、「rouga」というGemもあるようなのでそれも使うとさらに良いかと思います。
コメントを残す