Rails 应用开发笔记(七)

每当创建文章内容的时候,文本是以纯文本的形式被保存,不支持任何排版格式和语法,连换行符都被忽略了, 这显然是无法接受的,尤其是对于撰写技术类的文章而言,支持 Markdown 语法和代码高亮是非常有必要的。如果 是自己来开发这些功能的话显然工作量太大,幸运的是我们有强大的gem包可以使用,本次将介绍两个 gem 包的使用, 可以帮助我们快速实现该功能。

Redcarpet 和 coderay

Redcarpet for GitHub

coderay for GitHub

Redcarpet 是一个 Markdown 的解析器,功能强大,但是官方的文档太简略而且不好懂,也许是我的英文太差了😓!

Coderay 是用 ruby 写的语法高亮处理工具,支持多种编程语言。

在 Gemfile 中添加 redcarpet 和 coderay 包,然后运行 bundle

gem 'redcarpet' #markdown 解析器
gem 'coderay'   #代码高亮

由于没有看懂原文的使用指南,本着万事不会问 Google 的指导思想,果断搜出了两篇指南(感谢美帝人民的分享精神😄)

http://crabonature.pl/posts/16-markdown-in-ruby-on-rails http://allfuzzy.tumblr.com/post/27314404412/markdown-and-code-syntax-highlighting-in-ruby-on

以上两篇文章都是将文本的处理封装成了 helper 方法,目的是方便使用,不用在每一个显示的地方做改动,只需要调用固定的方法即可。

#app/helper/application_helper.rb
module ApplicationHelper

  class CodeRayify < Redcarpet::Render::HTML
    def block_code(code, language)
      #language ||= :plaintext
      CodeRay.scan(code, language).div
    end
  end

  def markdown(text)
    coderayified = CodeRayify.new(:filter_html => true,
                                  :hard_wrap => true)
    render_options = {
      # will remove from the output HTML tags inputted by user
      filter_html:     true,
      # will insert <br /> tags in paragraphs where are newlines
      # (ignored by default)
      hard_wrap:       true,
      # hash for extra link options, for example 'nofollow'
      link_attributes: { rel: 'nofollow' }
      # more
      # will remove <img> tags from output
      # no_images: true
      # will remove <a> tags from output
      # no_links: true
      # will remove <style> tags from output
      # no_styles: true
      # generate links for only safe protocols
      # safe_links_only: true
      # and more ... (prettify, with_toc_data, xhtml)
    }
    renderer = Redcarpet::Render::HTML.new(render_options)

    extensions = {
      #will parse links without need of enclosing them
      autolink:           true,
      # blocks delimited with 3 ` or ~ will be considered as code block.
      # No need to indent.  You can provide language name too.
      # ```ruby
      # block of code
      # ```
      fenced_code_blocks: true,
      # will ignore standard require for empty lines surrounding HTML blocks
      lax_spacing:        true,
      # will not generate emphasis inside of words, for example no_emph_no
      no_intra_emphasis:  true,
      # will parse strikethrough from ~~, for example: ~~bad~~
      strikethrough:      true,
      # will parse superscript after ^, you can wrap superscript in ()
      superscript:        true
      # will require a space after # in defining headers
      # space_after_headers: true
    }
    Redcarpet::Markdown.new(coderayified, extensions).render(text).html_safe
  end
end

然后在相应的视图代码中添加 markdown 方法:

...
<div class="panel-body">
  <p><%= markdown(@article.content) %></p>
</div>
...

现在创建文章后的效果是不是超赞呢😄!

原作者中的代码存在一个问题,当代码块中没有制定语言的时候就会出错,导致文章创建失败,例如文本中出现这样的代码:

def test
end

保存的时候就会出错:

解决的方案就是当没有制定语言的时候,设置一个默认的语言:

class CodeRayify < Redcarpet::Render::HTML
  def block_code(code, language)
    language ||= :plaintext #设置默认语言防止出错
    CodeRay.scan(code, language).div
  end
end

2019

代码整洁之道——程序员的职业素养

少于 1 分钟读完

很难想象我在读这本书的时候是除夕的晚上,早晨在公司的书架上无疑翻到这本书,读了几个章节就被深深的吸引住了, 吸引我的并不是我很迫切的需要提高自己的职业素养,而是发现作者描述的场景和自己碰到的情况何其的相似,在某些 情况下甚至是直击内心的。在家人都休息的时候,我在深夜一点钟看完了这本书,而且我觉得有必要做一下笔记,...

解决 nginx 错误:413 Request Entity Too Large

1 分钟读完

最近项目上遇到一个问题,某个 http 请求会返回 413 的状态码,一般来讲,这个问题是很好解决的, 网上有非常多的解决方案,但是我依然花了很长的时间找到问题根源,所以我觉得可以把这个过程记录下来。

Back to Top ↑

2018

Back to Top ↑

2017

Back to Top ↑

2016

Back to Top ↑

2015

Back to Top ↑

2014

Back to Top ↑