Kjetil Valle Tue Jan 03 2012

Embedding GitHub gists with Jekyll

Update: Since writing this post, I've started using the Gist Tag for Jekyll by Brandon Tilley. This is a plugin for Jekyll which solves the problem mentioned below, and provides additional goodies like caching and <noscript> tags for RSS readers.*

The title of this post roughly corresponds to one of my many search queries from when I was writing my last blog post. I was embedding some code as a GitHub gist, and suddenly everything I wrote beneath the gist disappeared from the post. Viewing the HTML source I could see perfectly well that everything was there, but Firefox would for some reason not render it.

After quite a while of debugging and searching for answers, I found the problem. It would seem that Maruku, the Markdown interpreter used by Jekyll, minimizes empty HTML tags. Thus, my

<script src="..."></script>

was transformed into

<script src="..." />

Self closing tags is a known issue with Firefox, and the problem also occurred when I viewed the page in Chrome.

The solution is deceptively simple. By adding some content between the script tags--a JavaScript comment or a space for example--Maruku no longer views them as empty, and no minimization is performed.