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 条评论
登录 后参与评论

相关文章

来自专栏進无尽的文章

绘图-圆环进度条实现详解

1702
来自专栏Spring相关

使用canvas绘制渐变色矩形和使用按键控制人物移动

963
来自专栏Guangdong Qi

iOS 连续动画效果(让APP动起来)

2073
来自专栏Porschev[钟慰]的专栏

项目中对图片的缩放和水印效果

///<summary> /// 获取一个图片按等比例缩小后的大小。 ///</summary> ///<param name="maxWidth">需要缩小到...

1666
来自专栏听雨堂

从MapX到MapXtreme2004[9]-标注的强调显示

        如果想要将一个选中的图元强调显示,用红色醒目的文字显示的话,我的思路如下:             1、不可能直接改原先的图元,所以必须要在一个...

2236
来自专栏拂晓风起

Flash Actionscript AS3 渐变透明 mask遮罩

1184
来自专栏向治洪

React Native仿美团下拉菜单

在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效果如下: ? 要实现上面的效果,在原生中比较好做,直接使用PopWindow组件即可。如...

46310
来自专栏菩提树下的杨过

silverlight2中的定时器,以及如何动态改变控件的坐标

参考了园子里nasa写里的定时器的用法,以及旋转木马的部分代码,弄了一个小小的示例,贴在这里方便以后备查 目的:让某一个控件沿着圆形轨迹运动 xaml:采用Ca...

1697
来自专栏lonelydawn的前端猿区

canvas星空的2d绘制示例

一切尽在注释里: <!DOCTYPE html> <html> <head>     <meta charset="utf-8"></meta>     <t...

2059
来自专栏林德熙的博客

win10 uwp 气泡 WPF 气泡

假设尖头宽度 10 高度 5 ,那么可以看到第一个点是 (0,5) 第二个点是 (5,0) 第三个点是 (10,5)

1331

扫码关注云+社区