ruby-on-rails - 为什么 Pygment.rb 没有正确突出显示 中的 标签 - 即谷歌美化友好标签？

Question

我是这样称呼它的:

<%= markdown question.body %>

这是我的 ApplicationHelper好像:

module ApplicationHelper
    class HTMLwithPygments < Redcarpet::Render::HTML
      def block_code(code, language)
        Pygments.highlight(code, lexer:language)
      end
    end

    def markdown(text)
        renderer = HTMLwithPygments.new(hard_wrap: true)
        options = {
          autolink: true,
          no_intra_emphasis: true,
          fenced_code_blocks: true,
          lax_html_blocks: true,
          strikethrough: true,
          superscript: true
        }
        Redcarpet::Markdown.new(renderer, options).render(text).html_safe
    end
end

但是，当它遇到这样的标签时:

<pre class="lang-cpp prettyprint-override">

它不会将颜色突出显示应用于该代码。这是为什么？

附言例如，这是由 Stack Overflow 通过执行以下操作生成的: <!-- language: lang-cpp -->
编辑 1

或者更具体地说，它似乎不会格式化 <code> <pre> 内的标签标签。曾经 <code>不在 <pre> 范围内它似乎格式化得很好。我该如何补救？

编辑 2

问题好像是 Pygment.rb的数据正在行动。它是 HTML，从这个要点可以看出 - https://gist.github.com/marcamillion/14fa121cf3557d38c1a8 .所以我想要做的是让 Pygment 正确格式化 body 中返回的代码我的要点中该对象的属性。

我怎么做？

编辑 3

这是我想要的 HTML 代码 Pygment.rb和 Redcarpet执行语法高亮:

<p>Here is a piece of C++ code that shows some very peculiar performance. For some strange reason, sorting the data miraculously speeds up the code by almost 6x:</p>

<pre class="lang-cpp prettyprint-override"><code>#include &lt;algorithm&gt;
#include &lt;ctime&gt;
#include &lt;iostream&gt;

int main()
{
    // Generate data
    const unsigned arraySize = 32768;
    int data[arraySize];

    for (unsigned c = 0; c &lt; arraySize; ++c)
        data[c] = std::rand() % 256;

    // !!! With this, the next loop runs faster
    std::sort(data, data + arraySize);

    // Test
    clock_t start = clock();
    long long sum = 0;

    for (unsigned i = 0; i &lt; 100000; ++i)
    {
        // Primary loop
        for (unsigned c = 0; c &lt; arraySize; ++c)
        {
            if (data[c] &gt;= 128)
                sum += data[c];
        }
    }

    double elapsedTime = static_cast&lt;double&gt;(clock() - start) / CLOCKS_PER_SEC;

    std::cout &lt;&lt; elapsedTime &lt;&lt; std::endl;
    std::cout &lt;&lt; "sum = " &lt;&lt; sum &lt;&lt; std::endl;
}
</code></pre>

<ul>
<li>Without <code>std::sort(data, data + arraySize);</code>, the code runs in <strong>11.54</strong> seconds.</li>
<li>With the sorted data, the code runs in <strong>1.93</strong> seconds.</li>
</ul>

<hr>

<p>Initially I thought this might be just a language or compiler anomaly. So I tried it in Java:</p>

<pre class="lang-java prettyprint-override"><code>import java.util.Arrays;
import java.util.Random;

public class Main
{
    public static void main(String[] args)
    {
        // Generate data
        int arraySize = 32768;
        int data[] = new int[arraySize];

        Random rnd = new Random(0);
        for (int c = 0; c &lt; arraySize; ++c)
            data[c] = rnd.nextInt() % 256;

        // !!! With this, the next loop runs faster
        Arrays.sort(data);

        // Test
        long start = System.nanoTime();
        long sum = 0;

        for (int i = 0; i &lt; 100000; ++i)
        {
            // Primary loop
            for (int c = 0; c &lt; arraySize; ++c)
            {
                if (data[c] &gt;= 128)
                    sum += data[c];
            }
        }

        System.out.println((System.nanoTime() - start) / 1000000000.0);
        System.out.println("sum = " + sum);
    }
}
</code></pre>

<p>with a similar but less extreme result.</p>

<hr>

<p>My first thought was that sorting brings the data into cache, but my next thought was how silly that is because the array was just generated.</p>

<p>What is going on? Why is a sorted array faster than an unsorted array? The code is summing up some independent terms, the order should not matter.</p>

您可以在以下位置查看此特定问题的当前呈现方式: http://boso.herokuapp.com

这是该网站上最受欢迎的问题，也是您看到的第一个问题。您会注意到代码只有一个灰色的背景并且是缩进的。没有像 Pygment.rb 这样的漂亮突出显示 promise 并执行其他代码片段(类似于@rorra 在他的回答中的其他示例中的说明)。

我无法删除 HTML - 因为我想正确解析它(即确保正确包含间距等)。我想要的唯一区别是在问题正文中表示的代码上突出显示语法。

Answer 1

您是否可以添加其他内容来重现该问题？喜欢 question.body 的内容？

如果我在 Controller 上做这样的事情:

class HomeController < ApplicationController
  def index
    @data = <<EOF
~~~ cpp
#include <fstream.h>

int main (int argc, char *argv[]) {
return(0);
}
~~~
EOF
  end
end

并在 View 上:

<pre class="lang-cpp prettyprint-override">
  <%= markdown @data %>
</pre>

它工作得很好，我可以毫无问题地看到解析后的代码。 question.body 的内容是什么？你能不能保存网页的内容(来自你的浏览器)并将其保存在 gist 上吗？所以我们可以调试？

谢谢

关于您的最后一条评论，这是一个简单的 css 问题，在您的样式表上，您可以添加:

.code {
  color: #DD1144 !important;
}

它会起作用，问题是你有一个 css 规则，如下所示:

pre .code {
  color: inherited;
}

这是使用从 body 类继承的颜色 #333333

这是更新 css 后的外观的屏幕:



带有您的代码的示例应用程序运行得非常好，我需要一个示例应用程序代码应用程序，或者一个示例代码，我们可以在其中重现您遇到的问题(没有正确的 css/样式表用于格式化代码)。

这是示例应用程序外观的示例:





最终编辑，问题不在于库，也不是您呈现问题的方式，而是您呈现的内容，检查问题的正文，这是我对实际呈现的正文提出的问题之一因为库应该呈现，但它没有像您期望的那样呈现:)

@data = <<EOF
    <p>I've been messing around with <a href="http://en.wikipedia.org/wiki/JSON">JSON</a> for some time, just pushing it out as text and it hasn't hurt anybody (that I know of), but I'd like to start doing things properly.</p>

    <p>I have seen <em>so</em> many purported "standards" for the JSON content type:</p>

    <pre><code>application/json
    application/x-javascript
    text/javascript
    text/x-javascript
    text/x-json
    </code></pre>

    <p>But which is correct, or best? I gather that there are security and browser support issues varying between them.</p>

    <p>I know there's a similar question, <em><a href="http://stackoverflow.com/questions/404470/what-mime-type-if-json-is-being-returned-by-a-rest-api">What MIME type if JSON is being returned by a REST API?</a></em>, but I'd like a slightly more targeted answer.</p>
EOF

这是我刚刚从 stackoverflow 复制/粘贴的另一个，它以突出显示的所有语法呈现，您注意到不同之处了吗？所以更新你的爬虫以正确的格式获取问题，它会起作用

@data = <<EOF
Here is a piece of C++ code that shows some very peculiar performance. For some strange reason, sorting the data miraculously speeds up the code by almost 6x:

<!-- language: lang-cpp -->

    #include <algorithm>
    #include <ctime>
    #include <iostream>

    int main()
    {
        // Generate data
        const unsigned arraySize = 32768;
        int data[arraySize];

        for (unsigned c = 0; c < arraySize; ++c)
            data[c] = std::rand() % 256;

        // !!! With this, the next loop runs faster
        std::sort(data, data + arraySize);

        // Test
        clock_t start = clock();
        long long sum = 0;

        for (unsigned i = 0; i < 100000; ++i)
        {
            // Primary loop
            for (unsigned c = 0; c < arraySize; ++c)
            {
                if (data[c] >= 128)
                    sum += data[c];
            }
        }

        double elapsedTime = static_cast<double>(clock() - start) / CLOCKS_PER_SEC;

        std::cout << elapsedTime << std::endl;
        std::cout << "sum = " << sum << std::endl;
    }

 - Without `std::sort(data, data + arraySize);`, the code runs in **11.54** seconds.
 - With the sorted data, the code runs in **1.93** seconds.

----------

Initially I thought this might be just a language or compiler anomaly. So I tried it in Java:

<!-- language: lang-java -->

    import java.util.Arrays;
    import java.util.Random;

    public class Main
    {
        public static void main(String[] args)
        {
            // Generate data
            int arraySize = 32768;
            int data[] = new int[arraySize];

            Random rnd = new Random(0);
            for (int c = 0; c < arraySize; ++c)
                data[c] = rnd.nextInt() % 256;

            // !!! With this, the next loop runs faster
            Arrays.sort(data);

            // Test
            long start = System.nanoTime();
            long sum = 0;

            for (int i = 0; i < 100000; ++i)
            {
                // Primary loop
                for (int c = 0; c < arraySize; ++c)
                {
                    if (data[c] >= 128)
                        sum += data[c];
                }
            }

            System.out.println((System.nanoTime() - start) / 1000000000.0);
            System.out.println("sum = " + sum);
        }
    }

with a similar but less extreme result.

----------

My first thought was that sorting brings the data into cache, but my next thought was how silly that is because the array was just generated.

What is going on? Why is a sorted array faster than an unsorted array? The code is summing up some independent terms, the order should not matter.

EOF