How can I keep Jekyll from adding whitespace in highlight?

1.5k views Asked by At

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

enter image description here

enter image description here

The problem is whitespace between code and pre:

enter image description here

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

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

2

There are 2 answers

0
Martin Thoma On BEST ANSWER

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)
6
RobertKenny On

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.