为什么Pygment.rb没有突出显示<pre class ="lang">中的<code>标签-ie Google Prettify友好标签?

mar*_*ion 6 markdown ruby-on-rails pygments redcarpet

我在我看来是这样称呼它:

<%= markdown question.body %>
Run Code Online (Sandbox Code Playgroud)

这就是我的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
Run Code Online (Sandbox Code Playgroud)

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

<pre class="lang-cpp prettyprint-override">
Run Code Online (Sandbox Code Playgroud)

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

PS这是由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.rbRedcarpet执行语法高亮:

<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>
Run Code Online (Sandbox Code Playgroud)

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

这是该网站上最受欢迎的问题,也是您看到的第一个问题.您会注意到代码只有一个灰色背景并缩进.没有像Pygment.rbpromises那样的突出显示,也没有其他代码片段(类似于@rorra在其答案中的其他示例中所示).

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

ror*_*rra 3

您还可以添加其他内容来重现该问题吗?喜欢question.body的内容吗?

如果我在控制器上做这样的事情:

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

int main (int argc, char *argv[]) {
return(0);
}
~~~
EOF
  end
end
Run Code Online (Sandbox Code Playgroud)

以及视图上的:

<pre class="lang-cpp prettyprint-override">
  <%= markdown @data %>
</pre>
Run Code Online (Sandbox Code Playgroud)

它工作得很好,我可以毫无问题地看到解析的代码。Question.body的内容是什么?您能否保存网页内容(从浏览器)并将其保存在要点上以便我们进行调试?

谢谢


关于你最后的评论,它是一个简单的CSS问题,在你的样式表上,你可以添加:

.code {
  color: #DD1144 !important;
}
Run Code Online (Sandbox Code Playgroud)

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

pre .code {
  color: inherited;
}
Run Code Online (Sandbox Code Playgroud)

这是使用从 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
Run Code Online (Sandbox Code Playgroud)

这是我刚刚从 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
Run Code Online (Sandbox Code Playgroud)