How can I keep Jekyll from adding whitespace in highlight?

Question

I'm currently experimenting with Jekyll. Most things look fine, but the way Jekyll processes code highlighting seems to be buggy.

I use pygments.

Then Jekyll seems to use pieces like:

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

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

to generate code like

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

which looks like

The problem is whitespace between code and pre:

How can I tell Jekyll not to put whitespace between those tags?

• repository with my blog
• a rendered example page (with this source page).

Bug hunting

• My Jekyll version is jekyll 1.3.1.
• With gem environment I found that my gems are at /var/lib/gems/1.9.1.
• With grep -rn "highlight" --exclude-dir=site --exclude-dir=test * I found that the highlight tag gets parsed in /var/lib/gems/1.9.1/gems/jekyll-1.3.1/lib/jekyll/tags/highlight.rb
• As this might be a Jekyll bug, I've added issue 1801

Now comes the strange part: highlight.rb seems not to add any whitespace between <pre> and <code>.

Answer 1

This problem is caused by Liquid, the templating engine of Jekyll (see Issue 216 of Liquid and Issue 1806 of Jekyll).

The current (12.12.2013) answer to this question is: You cannot keep Jekyll from adding those whitespaces.

But a fix to the underlying problem is to remove the whitespaces after all pages have been compiled. I've written the following Python script to do so:

#!/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)

Answer 2

This is stylesheet related.

I was able to build your sample page on my test environment using the default without any problem*.

Try adding the following to style.css

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

* Only problem I had was it complained about the following line

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

Which I resolved by wrapping the line in a paragraph tag.