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">

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

P.S。例如，这是由Stack Overflow生成的：

修改1

或者更具体地说，它似乎不会格式化<code>标记内的<pre>标记。 <code>不在<pre>范围内后，似乎格式正常。我该如何解决这个问题？

修改2

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

我该怎么做？

编辑3

这是我希望Pygment.rb和Redcarpet执行语法突出显示的HTML代码：

<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承诺那样的突出显示，并且在其他代码片段上也是如此（类似于@rorra在其答案的其他示例中的说明）。

我无法删除HTML - 因为我想正确地解析它（即确保正确包含间距等）。我想要的唯一区别是在问题正文中表示的代码上进行语法高亮。

Answer 1

为了重现这个问题，您还可以添加其他内容吗？喜欢question.body的内容？

如果我在控制器上做了类似的事情：

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

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

和视图：

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

它完全正常，我可以看到解析的代码没有任何问题。问题的内容是什么？你可以保存网页的内容（从浏览器中）并保存在gist上，以便我们调试吗？

THX

关于您的上一条评论，它是一个简单的CSS问题，在您的样式表上，您可以添加：

.code {
  color: #DD1144 !important;
}

它会起作用，问题是你有一个css规则，如：

pre .code {
  color: inherited;
}

并且使用从body类继承的颜色＃333333

这是一个关于css更新后的样子的屏幕：

enter image description here

示例应用程序与您的代码运行完全正常，我需要一个示例应用程序代码应用程序，或示例代码，我们可以重现您遇到的问题（没有正确的格式化代码的CSS /样式表）。 / p>

这是示例应用程序的示例：

enter image description here

最后的编辑，问题不在于库，它不是你渲染问题的方式，它是你渲染的内容，检查你的问题的主体，这是我与身体的问题之一实际上是在库应该渲染时渲染，但它不会像你期望的那样渲染：）

@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复制/ pastle的另一个，它会突出显示所有语法，你注意到区别吗？因此，请更新您的抓取工具，以正确的格式获取问题，然后才能生效

@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

为什么Pygment.rb不突出显示<code> tags within <pre class="lang"> properly -i.e. Google Prettify friendly tags?</pre></code>

1 个答案: