Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Escaping double curly braces inside a markdown code block in Jekyll

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?

like image 568
rescuecreative Avatar asked Jun 08 '14 02:06

rescuecreative


People also ask

How do you display curly braces in markdown?

Is there some other way to display curly brackets in markdown? Similarly if you ever just need a left or right curly brace use {{ or }} . Stu - you are a star! That did the trick, and thanks for your speedy reply.

How do you get out of curly braces in JSON?

Curly braces do not have to be escaped in JSON. Show activity on this post. No, curly braces do not have to be escaped in JSON strings. JSON is defined in RFC 7159.

What is double curly braces in JSON?

Data is represented in name/value pairs. Curly braces hold objects and each name is followed by ':'(colon), the name/value pairs are separated by , (comma). Square brackets hold arrays and values are separated by ,(comma).

What are curly braces brackets used for in coding?

Different programming languages have various ways to delineate the start and end points of a programming structure, such as a loop, method or conditional statement. For example, Java and C++ are often referred to as curly brace languages because curly braces are used to define the start and end of a code block.


5 Answers

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

{% raw %}
Hello, my name is {{name}}.
{% endraw %}
like image 152
SLaks Avatar answered Oct 21 '22 00:10

SLaks


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 %}
like image 33
Wilfred Hughes Avatar answered Oct 21 '22 02:10

Wilfred Hughes


With jekyll the code is:

{% highlight html%}
{% raw %}
     <h2> {{ user.name.first | uppercase }}</h2>
     <p> {{ user.email }}</p>
{% endraw %}
{% endhighlight %}
like image 32
Nicolas Molina Avatar answered Oct 21 '22 00:10

Nicolas Molina


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.

like image 33
liquidat Avatar answered Oct 21 '22 00:10

liquidat


This works in jekyll:

{%raw%}{{thing}}{%endraw%}
like image 22
Lisa Sinclair Avatar answered Oct 21 '22 01:10

Lisa Sinclair