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 }
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
セキュリティ的な注意点
不特定多数の人間が投稿できる機能で、マークダウン機能を利用するとXSSなどの攻撃をされる可能性があります。
基本的にマークダウンで投稿できる画面は、権限保持者のみ対応できるようにし、多数の人間が利用できるようにするには サニタイズを行うようにお願いします
マークダウンの簡単な記述方法は HTMLより簡潔に簡単に書ける！マークダウンの解説とコード例 をご参照ください
その他関連記事
Ruby on Rails4で簡易ブログを作成する１ | VIew Controller ルートを作成する
【初心者・独学者向け】Ruby on Railsで中間テーブルを作成し、多対多を実現する
Ruby on RailsでRedisを利用してランキング機能を実装する
Ruby on Railsとtwitterの投稿機能を連携する
Ruby on Railsで検索機能を実装する|ransack
