Rails里应用Markdown

Use Markdown and Pygments

Markdown is pretty awesome for writing, you just type in some tag and your article is formated. You just need to concentrate on the content of your article without worrying about format.

In your rails app, you can use easily do this. Here is a quick guide on how to use markdown and pygments in your rails app.

Add Gem

First thing you need to do is to add redcarpet and pygments.rb gems to you Gemfile. Just add gem 'gem 'redcarpet', '~> 3.3' and gem 'pygments.rb', '~> 0.6.3'to your Gemfile and run bundle install and restart your server.

Add helper

A helper need to be created to handle this markdown stuff. In you application_helper.rb, add this markdown method.

def markdown(content)
    renderer = Redcarpet::Render::HTML.new(hard_wrap: true, filter_html: true)
    options = {
        autolink: true,
        no_intra_emphasis: true,
        disable_indented_code_blocks: true,
        fenced_code_blocks: true,
        lax_html_blocks: true,
        strikethrough: true,
        superscript: true
    }
    Redcarpet::Markdown.new(renderer, options).render(content).html_safe
end

And then instead of using @post.content, try markdown(@post.content) and your article written in markdown syntax will be rendered to html elements. Simple enough? Yes, that's it!

Syntax Highlighting

Wait, one more thing. The code is not highlighted, which is not cool. Remember pygments.rb? Yes, we already installed that gem. We need some CSS to style the code. Here is a github like syntax highlighting, it's pretty awesome, go to checkout! Create a file _pygments.css.scss and add the css here, and then @import 'pygments' in your application.css.scss.

Also, you need to change your helper a bit.

class HTMLwithPygments < Redcarpet::Render::HTML
    def block_code(code, language)
        Pygments.highlight(code, lexer: language)
    end
end

Then change Redcarpet::Render::HTML to HTMLwithPygments in your markdown method. Finally, your code should looks something like this:

module ApplicationHelper
    class HTMLwithPygments < Redcarpet::Render::HTML
        def block_code(code, language)
            Pygments.highlight(code, lexer: language)
        end

    end
    def markdown(content)
        renderer = HTMLwithPygments.new(hard_wrap: true, filter_html: true)
        options = {
            autolink: true,
            no_intra_emphasis: true,
            disable_indented_code_blocks: true,
            fenced_code_blocks: true,
            lax_html_blocks: true,
            strikethrough: true,
            superscript: true
        }
        Redcarpet::Markdown.new(renderer, options).render(content).html_safe
    end
end

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏MelonTeam专栏

Bitmap 源码阅读笔记

导语: Android 系统上的图片的处理,跟Bitmap 这个类脱不了关系,我们有必要去深入阅读里面的源码,以便在工作中能更好的处理Bitmap相关的问题...

2518
来自专栏linux驱动个人学习

ALSA声卡驱动的DAPM(一)-DPAM详解

最近使用tinymix 调试相应的音频通道,但是一直不知道音频通道的原理是什么。所以百度了一下,百度结果是与DPAM有关。 一、DAPM简介:  DAPM是Dy...

4836
来自专栏别先生

Caused by: java.net.ConnectException: Call From master/192.168.199.130 to master:9000 failed on conn

1:安装好hive,准备启动的时候出现下面的错误(由于hive是基于Hadoop的,所以必须先将你的集群启动起来,我就是没有启动集群,直接启动hive导致的错误...

3268
来自专栏Pulsar-V

Save Camera Document

#pragma once #include "HCCamera.h" #include <time.h> #include <cstdio> #incl...

2828
来自专栏WOLFRAM

错觉艺术的巅峰,错觉图形大师M.C. Escher的不可能方块的可能模型

1363
来自专栏码匠的流水账

聊聊HystrixThreadPool

hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java

791
来自专栏专知

2018年SCI期刊最新影响因子排行,最高244,人工智能TPAMI9.455

2018年6月26日,最新的SCI影响因子正式发布,涵盖1万2千篇期刊。CA-Cancer J Clin 依然拔得头筹,其影响因子今年再创新高,达244.585...

1292
来自专栏我和未来有约会

简练的视图模型 ViewModel

patterns & practices Developer Center 发布了 Unity Application Block 1.2 for Silver...

2199
来自专栏搞前端的李蚊子

Html5模拟通讯录人员排序(sen.js)

// JavaScript Document  var PY_Json_Str = ""; var PY_Str_1 = ""; var PY_Str_...

6006
来自专栏闵开慧

Failed to set permissions of path

12/09/04 16:46:34 INFO support.ClassPathXmlApplicationContext: Refreshing org...

2737

扫码关注云+社区