语法突出显示 - 为什么 "linenos" 选项无法在 Jekyll 中添加行号？

Question

我使用jekyll生成我的网站。我想添加一个行号列到我的代码块。我在谷歌上搜索了一下，每个人都告诉我在highlight标签上添加一个"linenos"选项，但这对我来说不起作用:

{% highlight ruby linenos %}
def foo():
puts 'foo'
end
{% endhighlight %}

高亮显示工作正常，但是行号....

你能帮我一下吗?如果你想查看源css/html文件，点击这里。

谢谢!

进一步检查:

为这一部分生成的HTML是:

<div class="highlight"><pre><code class="ruby">
    <span class="k">def</span> <span class="nf">foo</span><span class="p">():</span>
    <span class="nb">puts</span> 
    <span class="s1">&#39;foo&#39;</span>
    <span class="k">end</span>
</code></pre></div>

Answer 1

我克隆了您的repo，生成了站点，并在浏览器中检查了它。一切看起来都很好。(我喜欢你的布局!)在我看来，这说明你的安排有问题。代码高亮显示对你有用吗?如果没有，您可能没有正确设置pyements。

安装:

sudo apt-get install python-setuptools
sudo easy_install Pygments

生成css:

pygmentize -S default -f html > default.css

确保在_config.yml中有pygments: true。

请确保适当地放置此样式表，并将其包含在您的default.html中。

我看到你已经有这个样式表包含在你的页面和你的_config。Yml看起来很好，但是对于其他需要这个答案的人来说，它就在那里。

如果您使用jekyll --no-auto生成站点，您在输出中看到任何错误吗?

请告诉我，我会很乐意尽力进一步提供帮助。:)

---

Update:这是为你的高亮测试博客文章生成的HTML。

<div class="highlight"><pre><code class="c"><span class="lineno">1</span> <span class="cp">#include &lt;stdio.h&gt;</span>
<span class="lineno">2</span> 
<span class="lineno">3</span> <span class="kt">int</span> <span class="nf">main</span><span class="p">()</span>
<span class="lineno">4</span> <span class="p">{</span>
<span class="lineno">5</span>   <span class="n">printf</span><span class="p">(</span><span class="s">&quot;Hello World!</span><span class="se">n</span><span class="s">&quot;</span><span class="p">);</span>
<span class="lineno">6</span>   <span class="k">return</span> <span class="mi">0</span><span class="p">;</span>
<span class="lineno">7</span> <span class="p">}</span>
</code></pre>
</div>

Answer 2

我刚刚在pypygs和jekyll中遇到同样的问题。我的降价看起来像

{% highlight c# linenos %}
    //my code
{% endhighlight %}

和生成的HTML

<div class="highlight">
    <pre>
        <code class="c">
            ...
        </code>
    </pre>
</div>

高亮显示有点奇怪，而且没有添加行号。最终的问题是，pypygs显然不承认"c#"是一种有效的语言，但我不得不添加"csharp"。

(以防其他人在设置时遇到这个问题)

Answer 3

我做了同样的事情。虽然行号显示css不是很漂亮。主要原因是bootstrap与我的style.css相冲突。把下面的代码添加到style.css中可以解决这个问题。

.highlight pre {
    background-color: transparent;
    border: transparent;
    color: inherit;
}