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

相关文章

来自专栏张善友的专栏

使用json 和jQuery制作级联dropdownlist

联动式的下拉选择是一个很普遍的需求,在ASP.NET MVC中可以使用Json和jQuery来实现,更简单的是使用jQuery的级联插件CascadingDro...

1908
来自专栏c#开发者

利用radio实现Datagrid的单选

在datagrid中,我们可能会需要实现这种功能——列的单选,本身datagrid提供了select命令可以实现这种功能。另为也可以利用HTM...

3288
来自专栏Windows Community

Windows Developer Day - Adaptive Cards

概述 Windows Developer Day 在 Modern Application Experience 环节展示了一种可以让开发者以更通用和统一的方式...

2839
来自专栏hbbliyong

WPF刷新界面之坎坷路

   项目需要一个硬件检测功能,需要用到界面刷新,刚开始想用个定时器,对检测过的硬设定时添加后刷新界面。 但是很遗憾,定时器并不能进行刷新。后台检测List数据...

3407
来自专栏张善友的专栏

What is aspnet.config

今天认真的看了一下1.1和2.0版本的Aspnet.config,发现非常的不同,也许是asp.net 2.0比1.1的修改非常大。在MSDN上也找不到相关的文...

1899
来自专栏JadePeng的技术博客

Html 5 video/audio 格式转换 ogg

Html5 开始支持video和audio标签,但是各个浏览器支持的格式不一样,见下图 Codec support in modern desktop brow...

41010
来自专栏NetCore

【翻译】在Visual Studio中使用Asp.Net Core MVC创建你的第一个Web API应用(一)

HTTP is not just for serving up web pages. It’s also a powerful platform for bui...

2085
来自专栏一个会写诗的程序员的博客

Macaca 极简教程Macaca 介绍快速开始:从无到有搭建 Macaca 环境 (forMac)代码实例awesome-macaca

macaca提供的元素查找工具,可以将app视图的结构以布局结构树的格式在浏览器上展示出来,用过点击某个元素,就可以方便的查询到该控件的基本信息,以方便查找。具...

1932
来自专栏iOS开发攻城狮的集散地

iOS后台音频播放及锁屏歌词

2086
来自专栏恰同学骚年

.NET Core微服务之基于Ocelot+IdentityServer实现统一验证与授权

  这里,假设我们有两个客户端(一个Web网站,一个移动App),他们要使用系统,需要通过API网关(这里API网关始终作为客户端的统一入口)先向Identit...

1694

扫码关注云+社区