😺

【Rails】Qiita::Markdownをインストールして使ってみる

2021/02/21に公開約6,700字

環境

CentOS 7.1
Rails 4.2.6
Ruby 2.0.0p353

Qiita::Markdownとは?

Qiita::Markdownは、いわゆるQiitaの新規投稿画面で使えるQiitaのMarkdownを自分の作った Ruby on Rails のアプリケーションに導入できるパッケージです。
increments/qiita-markdown


input
```ruby:hello.rb
puts 'hello world!'
# コードを埋め込んだり
```

output

hello.rb
puts 'hello world!'
# コードを埋め込んだり

input
* こんな感じの
* リスト形式にしてみたり

output

  • こんな感じの
  • リスト形式にしてみたり

Markdownはとにかくシンプル! 書きやすい!

さらに、Markdownだけではなく以下のような絵文字も使えるので、Railsのシステムで気軽にMarkdownを使いたい! という場合におすすめです。

😄 :smile:
☺️ :relaxed:
🐶 :dog:
🐱 :cat:
:octocat: :octocat:
👍 :+1:

他にも使える絵文字はもっとあります。詳しくは Emoji cheat sheet を参照してください。
Emoji cheat sheet

導入

さて、そんな便利なQiita::MarkdownをRailsに導入してみましょう。
なお、インストール手順だけを知りたいという人は一番下のQuick Usage Guideを参照してください。

まずはGemfileにqiita-markdownを追加します。

Gemfile
gem 'qiita-markdown'

そしてコマンドラインで bundle install を実行。
$ bundle install

するとエラーが2つほど発生します。
以下のコマンドを実行してみてねとのことなので、素直に実行してみます。
$ gem install charlock_holmes -v '0.7.3'

しかしこのコマンドでもエラーが発生してしまいます。
エラーだけではどうすればいいのかわからないのでググッてみました。
そしたら、以下のコマンドを先に実行しないといけないことがわかりました。

$ sudo yum -y install libicu-devel

参考元: Gitlab : charlock_holmesのインストールエラー

そして先ほど失敗したコマンドを再び実行します。
$ gem install charlock_holmes -v '0.7.3'

Building native extensions.  This could take a while...
Successfully installed charlock_holmes-0.7.3
Parsing documentation for charlock_holmes-0.7.3
Installing ri documentation for charlock_holmes-0.7.3
Done installing documentation for charlock_holmes after 0 seconds
1 gem installed

今度は成功しました。

ここでもう一度 $ bundle install を実行するとエラーの数は減りますが、まだ1つ残っています。
そのエラーによると、以下のコマンドを実行してねとのことなので実行してみます。

$ gem install rugged -v '0.25.0b4'

しかしここでもまたエラーが発生します。
こちらも同じく先に実行すべきコマンドがあるようです。

$ sudo yum -y install cmake

参考元: Qiita::Markdownを使う on Yosemite

そしてさっき失敗したコマンドを実行します。

$ gem install rugged -v '0.25.0b4'

Building native extensions.  This could take a while...
Successfully installed rugged-0.25.0b4
Parsing documentation for rugged-0.25.0b4
Installing ri documentation for rugged-0.25.0b4
Done installing documentation for rugged after 3 seconds
1 gem installed

うまくいきました。

これで2つのエラーの問題が解決したので、もう一度 $ bundle install を実行します。
$ bundle install

Bundle complete! 15 Gemfile dependencies, 75 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.
Post-install message from html-pipeline:

無事インストール完了しました!
ところが最後に見慣れないメッセージが表示されました。

-------------------------------------------------
Thank you for installing html-pipeline!
You must bundle Filter gem dependencies.
See html-pipeline README.md for more details.
https://github.com/jch/html-pipeline#dependencies
-------------------------------------------------

依存関係のあるgemパッケージがありますよ、詳しくはGitHubのリポジトリのREADMEを見てね、とのことだったのでREADMEを見てみたら以下をGemfileに追加しておいてね、と書いてあったので追加します。

Gemfile
gem 'github-linguist'

これでQiita::Markdownが使えるようになりました!

絵文字を使いたい

Qiitaで使える絵文字を使いたい人はあとちょっとだけ作業があります。絵文字を使わない人は飛ばしてもかまいません。

まずはGemfileに以下を追加します。

Gemfile
gem 'gemoji'

次にRakefileに以下を追加します。

Rakefile
load 'tasks/emoji.rake'

そして以下のコマンドを実行します。
$ rake emoji

成功していれば特にメッセージは表示されず、public/images以下にemojiというディレクトリが出来ているはずです。

実際に使ってみる

最初にヘルパーを定義します。app/helpers/application_helper.rbに以下を追加します。

app/helpers/application_helper.rb
module ApplicationHelper
  def qiita_markdown(markdown)
    processor = Qiita::Markdown::Processor.new(hostname: "example.com")
    processor.call(markdown)[:output].to_s.html_safe
  end
end

⚠️ "example.com" の箇所に自分のサイトのドメインを入れてください。開発環境のときやドメインがないときはとりあえず "example.com" のままでもOKです。(v0.15.0以降。それ以前の場合はhostnameオプションを外してください)

Qiitaの仕様変更により、Qiita::Markdownでは外部のサイトへのリンクがすべて新しいタブで開かれるようになりました。

外部リンクへの属性が変わります

そのため、バージョン0.15.0(v0.15.0)からはhostnameオプションにドメイン名を指定することで、指定したドメイン以外はすべて新しいタブで開かれるようになります。

このhostnameオプションに関してですが、オプションなのでなしでも動くと思っていたのですが、実際に試してみたらエラーになってしまったので、どうやら必須のようです。

そのため、インストールしたQiita::Markdownのバージョンがv0.15.0以降の場合はhostnameオプションをつけるようにしてください。反対に、それ以前のバージョンをお使いの場合はつけるとエラーになると思うのでつけないでください。

そのほか、v0.15.0からは外部リンクにrel="nofollow"が付与されます。

次にRailsで、Markdownで書きたいところをQiitaのMarkdownにそって自由に書いてみます。

# 見出し1
## 見出し2
### 見出し3

* リスト

[リンク](https://qiita.com)

```ruby:hello.rb
puts 'hello world!'
\```

猫を見つけた:cat:

‼️ 上記のMarkdownの\は必要ありません。

そして、これを表示するshow.html.erbでMarkdown形式で表示されるように編集します。

app/views/コントローラ名/show.html.erb
<%= qiita_markdown(@変数名.カラム名) %>

‼️ @変数名.カラム名はコントローラから渡されたActiveRecordの検索結果を持つ変数とデータベース上のMarkdownで書いた部分を保存するカラムを設定してください。すでにshow.html.erbを作っていた場合はMarkdownで書く前に表示していた@変数名とカラム名をそのまま使えばOKです。

これでshowのパスにアクセスし、Markdownになっていて、最後に猫の絵文字が表示されていたらOKです! お疲れさまでした!

おまけ

コードを埋め込んだときにシンタックスハイライトにならないのがちょっと残念です。
これに関してはSCSS(スタイルシート)に自分で記述する必要があります。
ぼくは面倒だったので、他の方が紹介しているスタイルをお借りしました。

Ruby on Rails で Qiita::Markdown を使えるようにするまで (on Yosemite)

この記事のCSSを追加している部分のコードをスタイルシートに追加してください。
これでシンタックスハイライトが出るようになりました! あとはお好みで好きなスタイルにしてください。

Quick Usage Guide

Gemfile
gem 'qiita-markdown'
gem 'github-linguist'
gem 'gemoji'
Rakefile
load 'tasks/emoji.rake'
$ sudo yum -y install libicu-devel`
$ gem install charlock_holmes -v '0.7.3'
$ sudo yum -y install cmake
$ gem install rugged -v '0.25.0b4'
$ rake emoji
$ bundle install

⚠️ この順番でうまくいくことは確認していないので、もしうまくいかなかった場合は記事の最初から読んでみてください。

参考サイト

Gitlab : charlock_holmesのインストールエラー
Qiita::Markdownを使う on Yosemite
Ruby on Rails で Qiita::Markdown を使えるようにするまで (on Yosemite)

GitHubで編集を提案

Discussion

ログインするとコメントできます