Question

有很多教程浮出水面，但它们似乎不完整或不全面，或者不适合我。

这就是我所做的。

的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方法中，我将高亮显示如下：

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">后，我看到了：

Aka ....根本没有任何东西呈现。

我将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\")"

Answer 1

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

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

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

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

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帮助程序的相应名称，您可以使用以下代码。代码从Rouge获取所有已定义的词法分析器并显示其标记（即Rouge识别它们的名称）：

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

在向用户显示选择框中可供选择的语言时，您可以（也可能应该）使用此列表。请注意，每个词法分析器还定义了title和desc方法，这些方法将为您提供人类可读的名称和每个方法的简短描述。您可能也希望将此信息显示给用户。

注意：你应该摆脱初始化程序，自定义HTML类和div缠绕在rouge帮助程序调用中（所有这些都是你原来的尝试）。除了上面的代码之外，您唯一需要的是CSS规则，您已经正确地将其包含在网页中。

B）突出显示的文本是带代码块的Markdown文本

尝试使其发挥作用的一些变化：

不需要初始值设定项，我认为你可以删除它（但如果你不想在帮助程序后面require所有文件，我想你可以保留它）。
从帮助程序类中删除block_code方法，包含markdown插件已经完成了相同的操作。
从模板中删除<div class="highlight">包装器div，然后只使用其中的帮助器。 Rouge使用＆＃34;突出显示＆＃34;添加自己的包装器。上课和另一个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
) %>

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

最后，这为我呈现了很好的颜色：

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

1 个答案:

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

B）突出显示的文本是带代码块的Markdown文本