Ruby on rails 如何在Rails中实现Rouge语法高亮显示？

有很多教程，但它们似乎是不完整的，或者不是最新的，或者不完全适合我

这就是我所做的

档案：

gem 'rouge'
gem 'redcarpet'

然后我创建了一个

config/initializer/rouge.rb

：

require 'rouge/plugins/redcarpet'

然后我创建了一个名为app/assets/stylesheets/rouge.css.erb的文件

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

然后在我的

show.html.erb

中，我做了以下操作：

<%= markdown(@question.body) %>

它呈现如下：

编辑2

我尝试了BoraMa的建议，得到的结果如下：

编辑3

我对博拉玛的回答做了如下修改

在我的

block\u code

方法中，我调用highlight如下：

Rouge.highlight(code, 'ruby', 'html')

在我看来，我是这样做的：

            <div class="highlight">
              <%= @question.test_suite %>
            </div>

<%= raw rouge_markdown(<<-'EOF'
                def rouge_me
                  puts "this is a #{'test'} for rouge"
                end
                EOF
                ) %>

原始问题（在尝试的解决方案中）表明，在突出显示的问题中会使用降价，但事实证明并非如此。所以这个答案分为两个不同的部分，一个用于突出显示没有标记的纯代码，另一个用于标记带有代码的文本

A） 您希望突出显示纯代码（不涉及降价） 在本例中，根据，您只需使用胭脂突出显示代码，即一个lexer和一个formatter。由于突出显示的文本将显示在网页上，因此您需要。对于lexer，您需要事先知道代码所使用的语言（或者您可以尝试从源代码本身猜测它，但对于小代码片段来说，它似乎不是非常可靠）

可以为高亮显示创建一个简单的帮助器方法：

module RougeHelper
  def rouge(text, language)
    formatter = Rouge::Formatters::HTML.new(css_class: 'highlight')
    lexer = Rouge::Lexer.find(language)
    formatter.format(lexer.lex(text))
  end
end

然后在模板中，只需使用要突出显示的文本和语言调用此帮助器：

<%= raw rouge("def rouge_me\n  puts 'hey!'\nend", "ruby") %>

在选择框中向用户显示要选择的语言时，可以（也可能应该）使用此列表。请注意，每个lexer还定义了

title

和

desc

方法，这些方法将为您提供一个可读的名称和每个方法的简短描述。您可能也想使用此信息向用户显示

注意：您应该去掉围绕rouge helper调用的初始值设定项、自定义HTML类和

div

（所有这些都是您最初尝试的内容）。除了上面的代码之外，您唯一需要的就是CSS规则，您已经在web页面中正确地包含了这些规则

B） 突出显示的文本是带有代码块的标记文本 您尝试使其正常工作时的几个变化：

不需要初始值设定项，我想您可以删除它（但是如果您不想

需要
帮助程序中的所有文件，我想您可以保留它）

从helper类中删除

block\u code

方法，通过包含markdown插件也可以完成同样的操作

从模板中删除

包装器div，只需使用其中的帮助器即可。Rouge用“highlight”类添加了自己的包装，而另一个div似乎混淆了它

请尝试以下帮助程序代码。顺便说一句，我将代码从

ApplicationHelper

移动到一个单独的

RougeHelper

（但这不是必需的更改）：

模块胭脂虫助手
需要“红地毯”
需要“胭脂”
需要“胭脂/插件/红地毯”
类HTML<红地毯：：渲染：：HTML
包括胭脂：：插件：：红地毯
结束
def rouge_减价（文本）
渲染_选项={
筛选器_html:true，
硬包装：是的，
链接_属性：{rel:'nofollow'}
}
renderer=HTML.new（呈现选项）
扩展={
自动链接：对，
防护代码块：正确，
松弛间距：正确，
没有强调：正确，
删除线：对，
上标：正确
}
markdown=red地毯：：markdown.new（渲染器、扩展）
markdown.render（文本）
结束
结束

然后，在模板中，我试图突出显示一个测试ruby代码：

<%= raw rouge_markdown(<<-'EOF'
```ruby
def rouge_me
  puts "this is a #{'test'} for rouge"
end
```
EOF
) %>

---

我尝试了你的建议，但对我无效。请查看根据我的实验结果更新的问题。根据我在您的答案中尝试的其他内容，我在问题中添加了另一个更新。我注意到一个更重要的差异，这使得代码不适用于您。您使用
高亮显示
类将胭脂辅助对象包装在
div
中。您不需要这样做，rouge本身用这个类将代码包装在
pre
中，而div似乎混淆了它。我更新了答案（见第3点）。我更新了问题，提供了更多关于您的建议结果的详细信息。刷新plz。我不知道为什么编辑4会这样，但我想我知道为什么编辑2不起作用。使用

module RougeHelper
  def rouge(text, language)
    formatter = Rouge::Formatters::HTML.new(css_class: 'highlight')
    lexer = Rouge::Lexer.find(language)
    formatter.format(lexer.lex(text))
  end
end

<%= raw rouge("def rouge_me\n  puts 'hey!'\nend", "ruby") %>

Rouge::Lexer.all.map(&:tag).sort
# => ["actionscript", "apache", "apiblueprint", "applescript", ..., "xml", "yaml"]

module RougeHelper
  require 'redcarpet'
  require 'rouge'
  require 'rouge/plugins/redcarpet'

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

  def rouge_markdown(text)
    render_options = {
        filter_html: true,
        hard_wrap: true,
        link_attributes: { rel: 'nofollow' }
    }
    renderer = HTML.new(render_options)

    extensions = {
        autolink: true,
        fenced_code_blocks: true,
        lax_spacing: true,
        no_intra_emphasis: true,
        strikethrough: true,
        superscript: true
    }
    markdown = Redcarpet::Markdown.new(renderer, extensions)
    markdown.render(text)
  end
end

<%= raw rouge_markdown(<<-'EOF'
```ruby
def rouge_me
  puts "this is a #{'test'} for rouge"
end
```
EOF
) %>