2 flat logo on transparent 256
2018-02-24

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

Blog2

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のレンダーオプション指定

dashboardshelper.rbの下記部分でマークダウン化した際のオプションを指定できます。 例えば、テーブルのマークダウンに対応する場合はtables: trueとしたりhardwrap: 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
    }


redcarpetの拡張機能一覧

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

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

:fencedcodeblocks:fenceコードブロック、PHP-Markdownスタイルを解析します~インデントされていない3つ以上のブロックまたはバッククォートで区切られたブロックは、コードとみなされます。コードブロックのオープニングフェンスの終わりにオプションの言語名を追加することができます。

: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.)があります。

redcarpetのレンダーオプション一覧

:filter_html:ユーザー入力HTMLを出力をしない。

:no_images:imgタグを生成しない。

:no_links:aタグを生成しない。

:no_styles:styleタグを生成しない。

:escapehtml:任意のHTMLタグをエスケープします。このオプションが優先され :nostyles、:nolinks、:noimagesそして:filter_html などの既存のタグは削除の代わりにエスケープされることを意味します。

:safelinksonly:安全とみなされるプロトコルのリンクを生成する。

:withtocdata:出力HTMLの各ヘッダーにHTMLアンカーを追加して、各セクションへのリンクを許可します。

:hard_wrap:
元のMarkdown文書に改行があった段落内にHTML タグを挿入します

:xhtml:XHTML準拠のタグを出力します。このオプションはRender::XHTMLレンダラーでは常に有効 です。

:prettify:prettyprintクラスを

<code>google-code-prettify

のタグに追加します。

:link_attributes:リンクに追加する追加の属性のハッシュ。

編集画面を追加

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

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')

※controller作成は通常のCRUDなcontrollerなので省略

表示画面を追加

views / articles / show.html.slim

div = markdown(@article.content).html_safe

以上

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

その他関連記事

Ruby On Rails4で簡易ブログを作成する1 | VIew Controller ルートを作成する

【初心者・独学者向け】Ruby On Railsで中間テーブルを作成し、多対多を実現する

Ruby On RailsでRedisを利用してランキング機能を実装する

Ruby On Railsとtwitterの投稿機能を連携する

Ruby On Railsで検索機能を実装する|ransack

前の記事
次の記事