如何在Rails中实现Rouge语法突出显示? [英] How do I implement Rouge syntax highlighting in Rails?

问题描述

周围有很多教程，但是它们似乎不完整或不是最新的，或者对我来说不完全有用.

There are a bunch of tutorials floating around, but they seem to be incomplete or not fully current or don't fully work for me.

这就是我所做的.

宝石文件:

gem 'rouge'
gem 'redcarpet'

然后我创建了config/initializer/rouge.rb:

require 'rouge/plugins/redcarpet'

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

Then I created a file called app/assets/stylesheets/rouge.css.erb

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

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

Then in my app/helpers/application_helper.rb, I added this:

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中，我这样做了:

Then in my show.html.erb, I did this:

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

但这实际上是行不通的.它将输出我的ruby代码段，如下所示:

But that literally does not work. It outputs my ruby code snippet like this:

如何使此代码段像Github一样进行格式化?甚至只是第一步要进行格式化，那么我该如何调整格式?

How do I get this snippet of code to be formatted like Github? Or even just the first step being to be formatted any at all, then how do I tweak the formatting?

我没有在页面的源代码中看到样式表，所以我不知道要针对我想要的样式进行调整.

I don't see a stylesheet included in the source of the page, so I don't know which styles to tweak for what I want.

编辑1

或者即使我这样做:

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

它呈现如下:

编辑2

我尝试了BoraMa的建议，得到的输出如下所示:

I attempted BoraMa's suggestion and I got output that looks like this:

编辑3

我对BoraMa的答案做了如下修改.

I made a modification to BoraMa's answer as follows.

在我的block_code方法中，我按以下方式调用Highlight:

In my block_code method, I call highlight as follows:

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

然后在我看来，我这样做:

Then in my view I do this:

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

然后产生这个:

请注意，我指的是屏幕截图底部的代码段.

Note I am referring to the code snippet at the bottom of the screenshot.

但是，顶部的文本是这样生成的:

However, the text at the top is generated with this:

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

它的渲染如屏幕快照所示.

And it is rendered as is shown in the screenshot.

编辑4

删除<div class="highlight">后，我看到以下内容:

After removing the <div class="highlight">, I see this:

再也....什么都没有呈现.

Aka....nothing is being rendered at all.

一旦我在视图中添加raw ...又名<%= raw rouge_markdown(@question.body) %>

Once I add raw to my view...aka <%= raw rouge_markdown(@question.body) %>

视图呈现以下内容:

修改5

以下是各种@question对象的内容:

Here is the content for various @question objects:

[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\")"

推荐答案

原始问题表明(在尝试的解决方案中)降价将用于突出显示的问题，但事实并非如此.因此，此答案分为两个不同的部分，一个部分用于突出显示不带有markdown的纯代码，另一个部分用于带有代码的markdown文本.

在这种情况下，根据自述文件，所有您需要用以下代码突出显示代码Rouge是词法分析器和格式化程序.由于突出显示的文本将显示在网页上，因此您需要

In this case, and according to the README, all you need to highlight the code with Rouge is a lexer and a formatter. Since the highlighted text will be displayed on a web page, you need the HTML formatter. For the lexer, you need to know the language the code is in beforehand (or you may try guessing it from the source code itself but it does not seem to be very reliable for small code snippets).

您可以为突出显示创建一个简单的帮助方法:

You can create a simple helper method for the highlighting:

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

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

Then in the template, simply call this helper with a text to highlight and the language:

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

哪个将呈现:

要获取Rouge支持的所有语言的列表及其应传递给rouge帮助器的相应名称，可以使用以下代码.该代码从Rouge获取所有已定义的词法分析器，并显示其标签(即Rouge识别它们的名称):

To get a list of all languages that Rouge supports and their corresponding names that should be passed to the rouge helper, you can use the following code. The code gets all defined lexers from Rouge and shows their tags (i.e. the names Rouge recognizes them with):

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

在选择框中向用户显示要选择的语言时，您可以(可能应该)使用此列表.请注意，每个词法分析器还定义了title和desc方法，这些方法将为您提供易于理解的名称以及每个名称的简短说明.您可能也想使用此信息向用户显示.

You can (and probably should) use this list when showing users the languages to choose from in the selection box. Note that each lexer also has the title and desc methods defined that will give you a human-readable name and a short description of each of them. You might want to use this info to be shown to the user, too.

注意:您应该摆脱初始化程序，自定义HTML类和包裹在rouge helper调用周围的div(所有这些都是您最初尝试使用的).除了上面的代码，您唯一需要的就是CSS规则，您已经正确地将其包含在网页中.

Note: you should get rid of the initializer, the custom HTML class and the div wrapped around the rouge helper call (all of these you have in your original attempt). The only thing you need besides the code above is the CSS rules, which you have already correctly included in the web page.

您尝试使其工作的一些变化:

A couple of changes from your attempt to make it work:

1. 不需要初始化程序，您可以删除它(我想，但是如果您以后不想在助手中require所有文件，我想您可以将其保留).

1. The initializer is not needed, you can remove it I think (but if you don't want to require all the files later in the helper, I guess you can leave it).

从帮助器类中删除block_code方法，通过包含markdown插件已经完成了同样的工作.

Remove the block_code method from the helper class, the same is already done by including the markdown plugin.

从模板中删除<div class="highlight">包装器div，然后在其中使用帮助器. Rouge在"highlight"类中添加了自己的包装器，另一个div似乎使它感到困惑.

Remove the <div class="highlight"> wrapper div from your template and just use the helper in it. Rouge adds its own wrapper with the "highlight" class and another div seems to confuse it.

尝试以下帮助代码.顺便说一句，我将代码从ApplicationHelper移到了单独的RougeHelper(但这不是必需的更改):

Try the following helper code. BTW, I moved the code from ApplicationHelper to a separate RougeHelper (but that is not a required change):

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

然后，在模板中，我尝试突出显示测试红宝石代码:

Then, in the template, I tried to highlight a test ruby code:

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

请注意，我需要手动指定语言，这使我使用3个反引号来分隔代码，而不是空格缩进.我不知道为什么代码语言自动检测在这里不起作用，也许是太短的代码.

Note that I needed to specify the language manually, which made me use the 3 backticks way to delimit the code instead of space indentation. I have no clue why the code language autodetection did not work here, perhaps it's a too short code.

最后，这很好地为我呈现了颜色:

In the end this rendered the colors for me nicely:

这篇关于如何在Rails中实现Rouge语法突出显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！