使用 Red Carpet 和 Rogue 的语法高亮在 Rails 5 应用程序中不起作用

Posted 2023-03-30

【中文标题】使用 Red Carpet 和 Rogue 的语法高亮在 Rails 5 应用程序中不起作用

【英文标题】：Syntaxhighlighting with Redcarpet and Rouge does not work in Rails 5 app

【发布时间】：2017-01-10 17:22:15

【问题描述】：

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

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

这些是我采取的步骤：

我实现了宝石（Redcarpet、Rouge）

我的 Applicationhelper 文件如下所示：

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

<%= Rouge::Themes::Github.render(:scope => '.highlight, code') %>

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


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

显然可以转换为降价，但不能使用 Rouge 进行语法高亮：

例如，当我在博文中使用此代码时：

```ruby
e =  "some ruby code"
e.puts
```

代码未突出显示。

上面代码sn-p的输出是这样的：

<pre><code class="ruby">e = &quot;some variable&quot;
e.puts
</code></pre>

我错过了什么吗？

我的代码库在这里：

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

非常感谢任何建议

你好，

安东尼

【问题讨论】：

你的 markdown 方法/助手为你的 ruby​​ 示例产生的输出是什么？另外，如果我没记错的话，fenced_code_blocks: true 是an extension（应该在你的extensions 哈希中，而不是options）。 （space_after_headers 也一样）

感谢 julp 的建议，代码的输出包装在 pre 标签中

添加到我之前对 julp 的回复中，输出也包含在带有 class=ruby 的代码标签中

您必须将renderer = Redcarpet::Render::HTML.new(options) 替换为renderer = HTML.new(options)

我替换了你建议的那行，现在输出是：

但我没有看到应用任何样式。我想知道 app/assets/stylesheets/rouge.css.erb 中的 .highlight 类是否被拾取

【参考方案1】：

对于感兴趣的人，这是我的 applicationhelper 中的工作代码：

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

这就是我在视图中实现它的方式：

app/views/articles/show.html.erb

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

markdown 和 syntaxhighlighting 正在工作。