4

我正在使用 jekyll 生成我的网站。我想在我的代码块中添加一个行号列。我搜索了谷歌，每个人都告诉我在hightlight标签中添加一个“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>
4

3 回答 3

3

我克隆了您的存储库，生成了站点，并在浏览器中查看。一切看起来都很好。（我喜欢你的布局！）这向我表明你的设置有些时髦。代码突出显示对您有用吗？如果没有，您可能没有正确设置 Pygments。

安装：

sudo apt-get install python-setuptools
sudo easy_install Pygments

要生成 css：

pygmentize -S default -f html > default.css

确保你pygments: true的 _config.yml 中有。

确保正确放置此样式表并将其包含在您的 default.html 中。

我看到您的页面中已经包含此样式表，并且您的 _config.yml 看起来不错，但是对于需要此答案的其他任何人，都可以。

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

让我知道，我很乐意尝试并提供进一步的帮助。:)

更新：这是为我为您拥有的突出显示测试博客文章生成的 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>
于 2013-01-13T05:27:37.487 回答
1

我刚刚遇到了与 pygments 和 jekyll 相同的问题。我的降价看起来像

{% highlight c# linenos %}

    //my code

{% endhighlight %}

以及生成的 HTML

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

突出显示有点奇怪，没有添加行号。最终的问题是 Pygments 显然没有将“c#”识别为有效语言，而是我不得不添加“csharp”。

（以防其他人在设置时遇到此问题）

于 2013-03-02T22:41:22.877 回答
0

我做了同样的事情。虽然行号显示 css 并不漂亮。主要原因是引导程序与我的 style.css 冲突。将以下内容添加到 style.css 解决了它。

.highlight pre {
    background-color: transparent;
    border: transparent;
    color: inherit;
}
于 2017-07-07T10:38:09.367 回答