Escaping double curly braces inside a markdown code block in Jekyll

MarkdownJekyllLiquidKramdown

Markdown Problem Overview


I'm using Jekyll to create a documentation site wherein I am trying to document some code that contains handlebars-like syntax. For example {{foo}}. The problem is that Jekyll uses liquid tags and no matter what I do, my double curlies are getting ripped out by the liquid processor.

By the way, I'm using kramdown as the markdown processor.

Here is something I've tried:

{% highlight html linenos %}
  Hello, my name is {{name}}.
{% endhighlight %}

This one removes the {{name}} section completely because it thinks it's a reference to a liquid variable.

I also tried this:

{% highlight html linenos %}
  Hello, my name is \{\{name\}\}.
{% endhighlight %}

In this case, I'm trying to escape the curly braces but the result is that the slashes get rendered into the page.

I even tried this:

{% highlight html linenos %}
  Hello, my name is <span>{</span>{name}}.
{% endhighlight %}

Admittedly this one was pretty dumb. In this case, because I've specified the syntax as html (which it needs to be), the span tag gets rendered into the page.

So how in the world can I resolve this?

Markdown Solutions


Solution 1 - Markdown

You're looking for the {% raw %} tag.

{% raw %}
Hello, my name is {{name}}.
{% endraw %}

Solution 2 - Markdown

You can use {% raw %} to ensure content is unmodified by Jekyll:

{% raw %}
This is inserted literally: {{foo}}
{% endraw %}

However, note that this is not a code block. You will need additional code formatting to make your content render as code:

{% raw %}
    I'm a code block, because I'm indented by 4 spaces
{% endraw %}

{% raw %}
```handlebars
I'm a code block that contains {{handlebars}}
with highlighting.
```
{% endraw %}

Solution 3 - Markdown

With jekyll the code is:

{% highlight html%}
{% raw %}
     <h2> {{ user.name.first | uppercase }}</h2>
     <p> {{ user.email }}</p>
{% endraw %}
{% endhighlight %}

Solution 4 - Markdown

For future references: using plain {% raw %} and {% endraw %} is only the second best solution since those are shown if you look up the Markdown on normal github.com.

The best way is to put {% raw %} and {% endraw %} in HTML comments:

<!-- {% raw %} -->
something with curlky brackets like { this } and { that }
<!-- {% endraw %} -->

Due to the HTML comments it is seen by Github as a comment. In Github pages the raw tags will prevent the parsing of the curly brackets in between the tags.

Solution 5 - Markdown

This works in jekyll:

{%raw%}{{thing}}{%endraw%}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionrescuecreativeView Question on Stackoverflow
Solution 1 - MarkdownSLaksView Answer on Stackoverflow
Solution 2 - MarkdownWilfred HughesView Answer on Stackoverflow
Solution 3 - MarkdownNicolas MolinaView Answer on Stackoverflow
Solution 4 - MarkdownliquidatView Answer on Stackoverflow
Solution 5 - MarkdownLisa SinclairView Answer on Stackoverflow