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

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 ~を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:リンクに追加する追加の属性のハッシュ。
その他関連記事
Ruby on Rails4で簡易ブログを作成する1 | VIew Controller ルートを作成する
【初心者・独学者向け】Ruby on Railsで中間テーブルを作成し、多対多を実現する
Ruby on RailsでRedisを利用してランキング機能を実装する
Ruby on Railsとtwitterの投稿機能を連携する
Ruby on Railsで検索機能を実装する|ransack