mmyoji's diary

プログラミングとか日々のどうでもいいこととか

Railsでmarkdown + Emoji対応 on Heroku

環境

すいません最近端折ってました?

経緯等

mdとemoji使いたかったので、色々試してました。

最初

の二つで対応しようとしたんですが、なぜかheroku環境で /assets/emojis/apple.png とかにアクセスできなくて、もう何回目になるかわかりませんがassets pipeline調べ直して、 config/environments/production.rbconfig.serve_static_files = true にしててもいかなくて、結局断念 ?

で次は

で対応しようかと思ったんですがなんか色々gemが入ってきて、ちょっと引いてしまったので(しかもbrewでなんかインストールしないといけなそう)やめました。

なので結局

で対応するようにしました ?

以下簡単に今回やったやつを残しておきマン ???

じっそー

# Gemfile

gem "redcarpet"
gem "gemoji"

bundle -j4

# Rakefile

load 'tasks/emoji.rake'

を追加して $ (bundle exec) rake emojipublic/assets に絵文字画像が入ります

(これが終わったらRakefileに足した一行は別に消してもおkです)

config/application.rb

  config.assets.paths << Emoji.images_path

  config.assets.precompile << "emoji/**/*.png"

を追加

# app/helpers/application.rb

module ApplicationHelper
  def md2html(text)
    markdown = Redcarpet::Markdown.new(Redcarpet::Render::HTML, md_extentions)
    markdown.render(text).html_safe
  end

  # gemoji にあったやつまま
  def emojify(content)
    h(content).to_str.gsub(/:([\w+-]+):/) do |match|
      if (emoji = Emoji.find_by_alias($1))
        %(<img alt="#$1" src="#{image_path("emoji/#{emoji.image_filename}")}" style="vertical-align:middle" width="20" height="20" />)
      else
        match
      end
    end.html_safe if content.present?
  end

  private

  # optionは好きなように設定してください
  def md_extentions
    {
      autolink: true,
      disable_indented_code_blocks: true,
      fenced_code_blocks: true,
      footnotes: true,
      highlight: true,
      no_intra_emphasis: true,
      quote: true,
      space_after_headers: true,
      strikethrough: true,
      tables: true,
    }
  end
end

でviewとかで

<p><%= md2html emojify(post.body) %></p>

的な感じでやればとりあえずおkです。

メソッドまとめてもよかったんですが、とりあえずこんな感じで。

js側でも対応しましたが、別の投稿にしますー