Ruby on Railsでredcarpetを利用し、シンタックスハイライトに対応したブログ機能を実装する

本サイトプログラミング学習サイトゼロイチも、Ruby on Railsで作成されており gem redcarpetでマークダウンで記入した内容をhtml化しています。

今回はRuby on RailsのGem redcarpetを利用し、Ruby on Railsでブログ機能を実装する方法を解説します

また、redcarpetではコード部分の表記があまりイケてないので、Gem coderayを利用しシンタックスハイライト対応にします。

そもそもシンタックスハイライトとは

シンタックスハイライトはマークダウンでコード部分を強調すると、コードの内容へ独自のCSSを適用し、コードを分かりやすく表示するデザインの事を言います。

この記事でも、コードの部分にはシンタックスハイライトが適用されています。

Gem redcarpeとcoderayをインストールする

下記をGemファイルに記入し、bundle installする

gem 'redcarpet'
gem 'coderay'

マークダウン機能を呼び出すhelperを実装する

app/helpers/dashboards_helper.rbを新規作成し下記コードを記載 ※helperの名前は変更しても問題ないです。

module DashboardsHelper
  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
    }

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

dashboardshelperの内容に記載されているlanguage.tos内ではでrb と記入するとruby と判定させることができます。

redcarpetのレンダーオプション指定

dashboards_helper.rbの下記部分でマークダウン化した際のオプションを指定できます。

例えば、テーブルのマークダウンに対応する場合はtables: trueとしたりhard_wrap: trueで文章内で改行があれば自動で改行します。

    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
    }

編集画面を追加

編集画面を新規作成します。

views / dashboards /new.html.slim

= simple_form_for(@article, url: dashboards_path) do |f|
  = f.input :publish_time
  = f.input :title, maxlength:'60'
  = f.text_area :content

  = f.submit t('btn.submit')

※erbでも可能上記はslim controller作成は通常のCRUDなcontrollerなので省略

【初心者・独学者向け】Ruby on Railsのviewを劇的に変える？！Slim入門

表示画面を追加

views / articles / show.html.slim

div = markdown(@article.content).html_safe

セキュリティ的な注意点

不特定多数の人間が投稿できる機能で、マークダウン機能を利用するとXSSなどの攻撃をされる可能性があります。

基本的にマークダウンで投稿できる画面は、権限保持者のみ対応できるようにし、多数の人間が利用できるようにするにはサニタイズを行うようにお願いします

マークダウンの簡単な記述方法は HTMLより簡潔に簡単に書ける！マークダウンの解説とコード例をご参照ください

redcarpetの拡張機能一覧

:nointraemphasis : 単語の中で強調を解析しない。このような文字列foobarbazはemタグを生成しません。

:tables : 解析テーブル、PHP-Markdownスタイルを利用

:fencedcodeblocks: fence ~を３つで囲った場合にコードブロックとして解析するかを設定します。

:autolink：<> 文字で囲まれていない場合でもリンクを解析します。http、https、ftpプロトコルのオートリンクが自動的に検出されます。プロトコルのない電子メールアドレスとhttpリンクが始まりますが、それ以降wwwも処理されます。

:disableindentedcodeblocks：通常のマークダウンコードブロックを解析しない。Markdownは、各行の先頭にある4つのスペースを持つテキストをコードブロックに変換します。このオプションを使用すると、このオプションが無効になります。と一緒に使用することが推奨されますfencedcode_blocks: true。

:strikethrough：パースの取り消し線、PHP-Markdownスタイル。2つの~文字は、取り消し線の先頭を示しthis is ~~good~~ badます。

:lax_spacing：HTMLブロックはMarkdown標準のように空行で囲む必要はありません。

:spaceafterheaders：ヘッダーの先頭のハッシュとその名前の間には常にスペースが必要#this is my header です。たとえば、有効なヘッダーではありません。

:superscript：文字の後に上付き文字を解析する^。連続した上付き文字は一緒にネストされ、複素数値はかっこで囲むことができます this is the 2^(nd) time。

:underline：下線の強調を強調する。 This is underlined but this is still italic。

:highlight：ハイライトを解析します。 This is ==highlighted==。これは次のようになります。highlighted

:quote：引用符を解析します。 This is a "quote"。これは次のようになります。quote

:footnotes：PHP-Markdownスタイルの脚注を解析します。脚注は、参照スタイルのリンクと非常によく似ています。テキストの隣にマーカー（例 This is a sentence.[^1]）とドキュメント内の任意の場所に脚注の定義（例[^1]: This is a footnote.）があります。