如何在Rails中实现Rouge语法高亮？

Question

如何在Rails中实现Rouge语法高亮？

ruby-on-railssyntax-highlightingruby-on-rails-5pygmentsrouge

15

有许多关于这个主题的教程流传，但它们似乎不完整或过时或对我来说不太适用。

这就是我所做的。

Gemfile:

gem 'rouge'
gem 'redcarpet'

然后我创建了一个config/initializer/rouge.rb文件：

require 'rouge/plugins/redcarpet'

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

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

然后在我的app/helpers/application_helper.rb中，我添加了以下内容：

module ApplicationHelper
  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)
    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
    }
    Redcarpet::Markdown.new(renderer, extensions).render(text).html_safe
  end
end

接着在我的show.html.erb文件中，我做了这样的修改：

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

但实际上这样做不起作用。它会以以下方式输出我的ruby代码片段：

如何使这段代码的格式类似于Github呢？或者至少先使代码有任何格式，然后如何调整格式？

我在页面源代码中没有看到包含样式表，所以我不知道哪些样式需要调整。

编辑1

甚至当我这样做时：

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

它的渲染结果如下：

编辑2

我尝试了BoraMa的建议，并得到了以下输出：

编辑3

我对BoraMa的答案进行了修改，具体如下。

在我的block_code方法中，我调用highlight方法如下：

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

那么在我的看法中，我会这样做：

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

然后它会生成这个:

注意，我指的是截图底部的代码片段。

但是，顶部的文本是由以下代码生成的:

          <pre class="highlight ruby">
            <%= rouge_markdown(@question.body) %>
          </pre>

并且它的渲染效果如截图所示。

编辑 4

移除了<div class="highlight">之后，我看到了这个：

也就是说...根本没有任何内容被渲染出来。

当我在我的视图中添加raw，即<%= raw rouge_markdown(@question.body) %>

视图将呈现为：

编辑 5

这里是各种@question对象的内容：

[1] pry(#<#<Class:0x007fc041b97ce8>>)> @question.body
=> "5.times do\r\n   puts \"Herro Rerl!\"\r\nend"
[1] pry(#<#<Class:0x007fc041b97ce8>>)> @question.body
=> "puts \"Hello World version 9\"\r\nputs \"This comes after version 8.\"\r\nputs \"This comes after version 7.\"\r\nputs \"This comes after version 6.\"\r\nputs \"This comes after version 5.\"\r\nputs \"This comes after version 4.\"\r\nputs \"This comes after version 3.\"\r\nputs \"This comes after version 2.\"\r\nputs \"This definitely comes after version 1.\""

[1] pry(#<#<Class:0x007fc041b97ce8>>)> @question.body
=> "def convert_relation(invited_gender, relation)\r\n case invited_gender\r\n \twhen \"male\"\r\n  \tcase relation\r\n      when \"daughter\", \"son\" then \"dad\"\r\n      when \"mom\", \"dad\" then \"son\"\r\n      when \"grandfather\", \"grandmother\" then \"grandson\"\r\n      when \"sister\", \"brother\" then \"brother\"\r\n      when \"wife\" then \"husband\"\r\n      when \"husband\" then \"husband\"\r\n    end\r\n  when \"female\"\r\n  \tcase relation\r\n      when \"daughter\", \"son\" then \"mom\"\r\n      when \"mom\", \"dad\" then \"daughter\"\r\n      when \"grandfather\", \"grandmother\" then \"granddaughter\"\r\n      when \"sister\", \"brother\" then \"sister\"\r\n      when \"wife\" then \"wife\"\r\n      when \"husband\" then \"wife\"\r\n    end\r\n  end\r\nend\r\n\r\nputs convert_relation(\"male\", \"wife\")"

- marcamillion

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matouš Borák · Accepted Answer

原问题中（在尝试的解决方案中）指出会使用Markdown来突出显示问题，但实际上并非如此。因此，这个答案分为两个不同的部分，一个用于突出显示没有Markdown的纯代码，另一个用于带有代码的Markdown文本。

A) 您想突出显示纯代码（不涉及Markdown）

在这种情况下，根据README，您只需要使用词法分析器和格式化程序即可使用Rouge突出显示代码。由于突出显示的文本将显示在网页上，因此您需要使用HTML格式化程序。对于词法分析器，您需要事先知道代码所使用的语言（或者您可以尝试从源代码本身猜测，但对于小的代码片段似乎不太可靠）。

您可以创建一个简单的辅助方法来进行代码突出显示：

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支持的所有语言及其对应的名称，应传递给rouge helper，请使用以下代码。该代码获取Rouge中定义的所有词法分析器，并显示它们的标签（即Rouge用于识别它们的名称）：

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

当向用户展示语言选择框供其选择时，您可以（并且很可能应该）使用此列表。请注意，每个词法解析器还定义了title和desc方法，这将为您提供人类可读的名称和每个词法解析器的简短描述。您可能想要使用此信息来显示给用户。

注意: 你需要除了上面的代码之外，摆脱初始化器、自定义 HTML 类和包装 rouge 辅助函数调用的 div （所有这些都在你的原始尝试中）。你只需要已经正确包含在网页中的 CSS 规则。

B) 突出显示的文本是一个具有代码块的 Markdown 文本

进行了一些更改以使其正常工作：

初始化器是不必要的，我认为你可以删除它（但如果您不想在助手中require所有文件，我猜你可以留下它）。
从助手类中删除block_code方法，已经通过包含 markdown 插件完成相同的操作。
从您的模板中删除<div class="highlight">包装器 div，只需在其中使用助手即可。Rouge 添加了其自己的带有“highlight”类的包装器，另一个 div 似乎会让它混淆。

请尝试以下辅助函数代码。顺便说一句，我将代码从ApplicationHelper移动到了单独的RougeHelper（但这不是必需的更改）：

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

然后，在模板中，我尝试突出显示一段 Ruby 测试代码：

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

请注意我需要手动指定语言，这使我使用三个反引号来界定代码，而不是空格缩进。我不知道为什么代码语言自动检测在这里无法工作，也许是因为代码太短了。

最终，这为我很好地呈现了颜色：