Help us understand the problem. What is going on with this article?

[Rails] Markdown形式で入力できるようにしてみた(シンタックスハイライトも対応)

More than 1 year has passed since last update.

railsでmarkdown形式でmarkdown形式で入力した文字列を表示できるようにしてみました.
シンタックスハイライト(言語ごとに表示を合わせる)にも対応させました.

環境

Gemfile
source 'https://rubygems.org'

gem 'rails', '4.2.6'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'redcarpet', '~> 2.3.0'        #markdown
gem 'coderay'

group :development, :test do
  gem 'sqlite3'
  gem 'byebug'
  gem 'pry-rails'
end

group :development do
  gem 'web-console', '~> 2.0'
  gem 'spring'
end

gemを追加する

Gemfile
gem 'redcarpet', '~> 2.3.0'
gem 'coderay'

redcarpetはマークダウン形式に対応させるgemです.
coderayはシンタックスハイライトに対応させるためのgemです.
追加したら bundle install する.

ヘルパー追加

application_helper.rb
module ApplicationHelper
    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(filter_html: true, hard_wrap: true)
        options = {
            autolink: true,
            space_after_headers: true,
            no_intra_emphasis: true,
            fenced_code_blocks: true,
            tables: true,
            hard_wrap: true,
            xhtml: true,
            lax_html_blocks: true,
            strikethrough: true
        }
        markdown = Redcarpet::Markdown.new(html_render, options)
        markdown.render(text)
    end
end

scaffoldで使ってみる

Terminal
$ rails g scaffold Article title:string body:text
Terminal
$ rake db:migrate

表示に <%= markdown(@article.body).html_safe %> を追加する.

show.html.erb
<p id="notice"><%= notice %></p>

<p>
  <strong>Title:</strong>
  <%= @article.title %>
</p>

<p>
  <%= markdown(@article.body).html_safe %>
</p>

<%= link_to 'Edit', edit_article_path(@article) %> |
<%= link_to 'Back', articles_path %>

scaffoldで作成したアプリを rails s で動かす.
http://localhost:3000/articles/new でデータを作成または,
http://localhost:3000/articles/1/edit でデータを編集する.
スクリーンショット 2016-06-26 18.52.17.png

http://localhost:3000/articles/1 で表示を確認する.
スクリーンショット 2016-06-26 18.52.26.png

マークダウンの記法は次の記事を見るとわかりやすいです!

http://qiita.com/Qiita/items/c686397e4a0f4f11683d

参考

http://chmod.tech/?p=621
http://qiita.com/usutani/items/3651c7146f44592b00e5

hkengo
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした