How to Display Double Curly Braces Code in Jekyll

Share a solution to a problem I did not know I had for a long time: parts of my code snippets disappeared when publishing in Jekyll!

I will walk through a simple example of code that disappears when rendered in Jekyll’s HTML output.

You will learn how to properly display any code that uses syntax markers: {{}} in Jekyll.

This article will take you less than two minutes to read.

Introduction

I had a hard time displaying any code that used {{}} in any of my articles. This was especially true of Angular template code samples. Example:

<li>value from app.component numberGenerator(): </li>
<li>value of app.component numberGenerator: </li>

Notice anything wrong??

Well, the missing element is: numberGenerator() and numberGenerator - the real code I want displayed:

<li>value from app.component numberGenerator(): {{ numberGenerator() }} </li>
<li>value of app.component numberGenerator: {{ numberGenerator }} </li>

I didn’t know why this happened, I did see errors such as:

Liquid Warning: Liquid syntax error (line 9): Expected end_of_string but found open_round in "{{ numberGenerator() }}" in /home/vagrant/rgr/_posts/2020-10-23-jekyll-display-double-curly-braces-in-cod
e.md

or I would even escape the curly braces:

<li>value from app.component numberGenerator(): \{\{ numberGenerator() \}\} </li>
<li>value of app.component numberGenerator: \{\{ numberGenerator \}\} </li>

Ugh - I don’t know why I thought that was a good idea at the time. I guess I just wanted to get the article published (and hoped that would make sense to the reader.)

Solution

Well, I upgraded my blog a bit and dove into the Jekyll documentation more.

The solution to having code that uses {{}} for its syntax:

Use raw and endraw tags around code that also uses {{}} for its syntax.

Main reason: Jekyll uses the Liquid templating system, which itself uses {{}} for its syntax.

Liquid Documentation

Sigh, so simple, why didn’t I just read the documentation earlier?

Oh wait, it’s because I wanted to get an article published. :-)

Conclusion

Diving into documentation more helped me solve a problem where “code” that used {{}} disappeared when publishing.

Now when I run into a perplexing problem, I’ll definitely read the manual.