127

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?

5 Answers 5

235

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

{% raw %}
Hello, my name is {{name}}.
{% endraw %}
2
  • 1
    What if the code you want to esacape is {% raw %} {{...}} {% endraw %} as one might find in a blog post discussing this very subject ?
    – starfry
    Commented Dec 18, 2016 at 21:17
  • 4
    @starfry: Funny you should ask... blog.slaks.net/2013-06-10/jekyll-endraw-in-code
    – SLaks
    Commented Dec 18, 2016 at 22:55
45

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 %}
2
  • Thanks for that addition. I ended up doing something a bit uglier than that like {% raw %}{{ foo }}{% endraw %} for every occurrence so I'll take a look at what you did here. Commented Jun 3, 2016 at 22:36
  • This is a more flexible solution, as it allows to keep the code block and its syntax.
    – Kiddo
    Commented Nov 24, 2017 at 21:40
23

With jekyll the code is:

{% highlight html%}
{% raw %}
     <h2> {{ user.name.first | uppercase }}</h2>
     <p> {{ user.email }}</p>
{% endraw %}
{% endhighlight %}
1
  • worth noting: The above works, also with Rouge highlighter. However raw does however not work if using fenced syntax for highlighting code (three leading backticks like ```html …)
    – Frank N
    Commented Apr 9, 2018 at 5:26
17

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.

3
  • 1
    That was precisely my concern. The idea with html comments is quite nifty.
    – The Fool
    Commented May 26, 2022 at 14:22
  • @TheFool Glad that I was able to help someone with this :)
    – liquidat
    Commented Jun 15, 2022 at 15:37
  • 1
    Great answer. I had to escape many code block in my markdown file, the easiest solution was to put <!-- {% raw %} --> at the beginning, then put <!-- {% endraw %} --> completely at the end of the article, this way I escaped everything at once.
    – jawira
    Commented Oct 27, 2022 at 20:14
9

This works in jekyll:

{%raw%}{{thing}}{%endraw%}
1
  • 1
    FYI, I included the triple back quote to demonstrate that a code block within Jekyll would work. It wasn't intended to create a code block in the reply :) Commented Aug 4, 2018 at 9:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.