首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >使用Redcarpet和Rouge的语法突出显示在Rails 5应用程序中不起作用

使用Redcarpet和Rouge的语法突出显示在Rails 5应用程序中不起作用
EN

Stack Overflow用户
提问于 2017-01-11 01:22:15
回答 1查看 714关注 0票数 2

有没有人有Rails的Redcarpet和Rouge的经验?我正在尝试使用gem在我的博客应用程序中进行语法高亮显示。我的实现基于这篇博文:

http://www.brettdemetris.com/posts/4

以下是我采取的步骤:

我实现了gem (Redcarpet,Rouge)

我的Applicationhelper文件如下所示:

代码语言:javascript
复制
app/helpers/application_helper.rb

module ApplicationHelper

require 'rouge'
require 'rouge/plugins/redcarpet'

class HTML < Redcarpet::Render::HTML
  include Rouge::Plugins::Redcarpet

  def block_code(code, language)
    Rouge.highlight(code, language || 'text', 'html')
  end
end

def markdown(text)
    options = {
      filter_html:     true,
      hard_wrap:       true,
      link_attributes: { rel: 'nofollow', target: "_blank" },
      space_after_headers: true,
      fenced_code_blocks: true
    }

    extensions = {
      autolink:           true,
      highlight:          true,
      superscript:        true,
      disable_indented_code_blocks: true
    }

    renderer = Redcarpet::Render::HTML.new(options)
    markdown = Redcarpet::Markdown.new(renderer, extensions)

    markdown.render(text).html_safe
  end
end

我有一个用于Rouge的样式表: app/assets/stylesheets/rouge.css.erb

代码语言:javascript
复制
<%= Rouge::Themes::Github.render(:scope => '.highlight, code') %>

.highlight {
  background-color: #f5f7f9;
  padding: 1em;
}

.highlight .err {
    color: #a61717;
    background-color: #f5f7f9;
}

显然,到markdown的转换可以正常工作,但不能使用Rouge突出显示语法:

例如,当我在我的博客中使用以下代码时:

代码语言:javascript
复制
```ruby

E=“一些拼音代码”

e.puts

代码语言:javascript
复制

代码未突出显示。

上述代码片段的输出如下所示:

代码语言:javascript
复制
<pre><code class="ruby">e = &quot;some variable&quot;
e.puts
</code></pre>

我是不是遗漏了什么?

我的代码库在这里:

https://github.com/acandael/personalsite/tree/markdown

我们非常感谢您的任何建议

大家好,

安东尼

EN

回答 1

Stack Overflow用户

发布于 2017-01-12 15:32:28

对于感兴趣的人,这是我的应用程序助手中的工作代码:

代码语言:javascript
复制
app/helpers/application_helper.rb

module ApplicationHelper

require 'redcarpet'
require 'rouge'
require 'rouge/plugins/redcarpet'

class HTML < Redcarpet::Render::HTML
  include Rouge::Plugins::Redcarpet

  def block_code(code, language)
    Rouge.highlight(code, language || 'text', 'html')
  end
end

def markdown(text)
    options = {
      filter_html:     true,
      hard_wrap:       true,
      link_attributes: { rel: 'nofollow', target: "_blank" }
    }

    extensions = {
      autolink:           true,
      highlight:          true,
      superscript:        true,
      disable_indented_code_blocks: true,
      space_after_headers: true,
      fenced_code_blocks: true
    }

    #renderer = Redcarpet::Render::HTML.new(options)
    renderer = HTML.new(options)
    markdown = Redcarpet::Markdown.new(renderer, extensions)

    markdown.render(text).html_safe
  end
end

下面是我在视图中实现它的方式:

代码语言:javascript
复制
app/views/articles/show.html.erb

<%= raw(markdown(@article.body)) %>

markdown和语法高亮显示现在起作用了。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41574630

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档