如何防止 Jekyll 在突出显示中添加空格？答案

【问题标题】：How can I keep Jekyll from adding whitespace in highlight?如何防止 Jekyll 在突出显示中添加空格？
【发布时间】：2013-12-17 07:56:41
【问题描述】：

我目前正在试验 Jekyll。大多数事情看起来都很好，但是 Jekyll 处理代码高亮的方式似乎有问题。

我使用 pygments。

然后 Jekyll 似乎使用了这样的片段：

{% highlight python %}
#!/usr/bin/env python

def wer(r, h):
    """
{% endhighlight %}

生成类似的代码

<div class="highlight">
   <pre>
      <code class="python"><span class="c">#!/usr/bin/env python</span>

<span class="k">def</span> <span class="nf">wer</span><span class="p">(</span><span class="n">r</span><span class="p">,</span> <span class="n">h</span><span class="p">):</span>
    <span class="sd">"""</span>
<span class="sd">        Calculation of WER with Levenshtein distance.</span>
<span class="sd">        Works only for iterables up to 254 elements (uint8).</span>
<span class="sd">        O(nm) time ans space complexity.</span>
[...]
    <span class="n">doctest</span><span class="o">.</span><span class="n">testmod</span><span class="p">()</span>
</code>
   </pre>
</div>

看起来像

问题是code 和pre 之间的空格：

如何告诉 Jekyll 不要在这些标签之间放置空格？

repository with my blog
rendered example page（带有此source page）。

寻找错误

我的 Jekyll 版本是 jekyll 1.3.1。
使用gem environment，我发现我的宝石位于/var/lib/gems/1.9.1。
使用grep -rn "highlight" --exclude-dir=site --exclude-dir=test * 我发现高亮标签在/var/lib/gems/1.9.1/gems/jekyll-1.3.1/lib/jekyll/tags/highlight.rb 中被解析
由于这可能是 Jekyll 错误，我添加了 issue 1801

现在是奇怪的部分：highlight.rb 似乎没有在<pre> 和<code> 之间添加任何空格。

【问题讨论】：

我看了你的source code。只是出于好奇，您为什么在降价文件中使用 HTML 标签？你为什么不使用 Markdown？
我目前正在尝试从 WordPress 迁移到 Jekyll。所以原因很简单，我之前有 HTML。我目前不确定是否要切换。使用 HTML 的一个优点是我知道语法。
Jekyll 确实支持 HTML 文件。如果您要在帖子中使用纯 HTML，我建议您将文件扩展名从 .markdown 更改为 .html。这样您的帖子就不会通过 Markdown 处理器发送。
感谢您提及这一点。由于降价可能是另一个错误来源，我已切换到 .html 文件。问题依然存在。
我也尝试将文件扩展名更改为.html，但这并没有解决任何问题。我还将您的帖子转换为降价，但仍然产生相同的错误。由于在这两种情况下<pre> 和<code> 标签之间都添加了空格，我认为这是处理器和{% highlight bash %} 标签的问题。

标签： jekyll liquid pygments

【解决方案1】：

这是样式表相关的。

我能够使用默认设置在我的测试环境中构建您的示例页面，没有任何问题*。

尝试将以下内容添加到style.css

/* standard */
 .post pre {
  border: 1px solid #ddd;
  background-color: #eef;
  padding: 0 .4em;
}

* 我唯一遇到的问题是它抱怨以下行

<a href="http://jekyllrb.com/">Jekyll</a> is a static blog generator.

我通过在段落标签中换行来解决这个问题。

【讨论】：

不，这不能解决问题（请参阅最新版本）
好的。我会尝试更多的调整。这绝对是 CSS 问题，而不是 Jekyll 问题。
您可以看到，当您删除<pre> 和<code> 之间的空格时，添加的空格是问题所在。有些东西增加了这个空白，我认为它是 Jekyll。请删除您的“答案”，因为它没有回答我的问题。
在示例页面上查看源代码时，我没有看到任何多余的空格。另外，正如我所说，该页面在我的测试安装中使用默认样式构建没有任何问题。
我添加了代码行的图像。请看一下。它肯定在那里。

【解决方案2】：

这个问题是由 Jekyll 的模板引擎 Liquid 引起的（参见 Liquid 的 Issue 216 和 Jekyll 的 Issue 1806）。

这个问题的当前（12.12.2013）答案是：你不能阻止 Jekyll 添加这些空格。

但解决根本问题的方法是在编译所有页面后删除空格。为此，我编写了以下 Python 脚本：

#!/usr/bin/env python
import re, fnmatch, os

def removeWhitespace(file_path):
    #read file content
    with open(file_path) as f:
        content = f.read()

    #replace whitespace
    openingTag = re.compile('<pre>\s*<code', re.DOTALL)
    closingTag = re.compile('</code>\s*</pre>', re.DOTALL)
    if re.findall(openingTag, content):
        content = re.sub(openingTag, '<pre><code', content)
        content = re.sub(closingTag, '</code></pre>', content)

    #write without whitespace
    with open(file_path,'w') as f:
        f.write(content)

# Get all HTML files
files = []
for root, dirnames, filenames in os.walk('.'):
  for filename in fnmatch.filter(filenames, '*.html'):
      files.append(os.path.join(root, filename))

for filename in files:
    removeWhitespace(filename)

【讨论】：