学習44日目　railsでマークダウン表示を実装する

こんにちは、KATUUUNです。ここ最近天気があまり良くないですが、私の心はいつも晴れマークです！(恥)

久しぶりの投稿となりました。今日はオリジナルアプリを通じて学習したマークダウン方式についてアウトプットします。

投稿した内容をマークダウン方式で表示させる方法

ちなみにオリジナルアプリとは、プログラミングに特化した単語帳アプリを開発中です

1 gemの導入
必要なgemをgemfileに記述します

1.1 redcarpet: マークダウンで記入した内容をHTML化してくれるgemです

1.2 coderay: redcarpetだけだと味気ないため、シンタックスハイライトするgemです。
＊そもそもシンタックスハイライトとは、コードの内容へ独自のCSSを適用し、コードを分かりやすく色分けしてくれることを指します。

gem 'redcarpet'
gem 'coderay'

いつも通りbundle install

2 helperファイルにマークダウンの記述をする
＊そもそもhelperとは、viewをシンプルにする為に、viewと別の場所(helper)で定義しておいたメソッドをviewから呼び出すことができるファイルです。

今回、マイページに表示させたかったため、app>helpers>user_helper.rbに記述しました。大元のapplication_helper.rbでも問題なし。

module UsersHelper
  require 'redcarpet'
  require 'coderay'

  class HTMLwithCoderay < Redcarpet::Render::HTML
    def block_code(code, language)
      language = language.split(':')[0]

      case language.to_s
        when 'rb'
          lang = 'ruby'
        when 'yml'
          lang = 'yaml'
        when 'css'
          lang = 'css'
        when 'html'
          lang = 'html'
        when ''
          lang = 'md'
        else
          lang = language
      end

      CodeRay.scan(code, lang).div
    end
  end

   def markdown(text)
    html_render = HTMLwithCoderay.new( with_toc_data: true)

    option = {
        autolink: true,
        space_after_headers: true,
        fenced_code_blocks: true,
        tables: true,
        hard_wrap: true,
        lax_html_blocks: true,
        strikethrough: true,
        filter_html:     true,
        with_toc_data: true,
        no_intra_emphasis:  true,
        no_styles: true
    }

    markdown = Redcarpet::Markdown.new(html_render, option)
    markdown.render(text).html_safe
  end
end

ここで記述内容の説明

2.1

case language.to_s
        when 'rb'
          lang = 'ruby'
        when 'yml'
          lang = 'yaml'
        when 'css'
          lang = 'css'
        when 'html'
          lang = 'html'
        when ''
          lang = 'md'
        else
          lang = language

コードの言語の指定方法をカスタマイズすることができる。例え```rubyとしなくても```rbで色付けできる。また言語を指定しなかった時エラーが出ないように'md'を設ける

2.2

 option = {    
        autolink:            true,
        space_after_headers: true,
        fenced_code_blocks:  true,
        tables:              true,
        hard_wrap:           true,
        lax_html_blocks:     true,
        strikethrough:       true,
        filter_html:         true,
        with_toc_data:       true,
        no_intra_emphasis:   true,
        no_styles:           true
    }