When writing a post about a language, including a block of codes can often make the illustration more clear. But what should we do when we want to include Jekyll codes in a website made with Jekyll? Sounds like a tricky question. Because every time you write Jekyll codes in the back-end markdown file, the codes will be implemented first instead of showing off.

My method to do the trick is as following:

{% highlight html %}
{% raw %}
  Write your Jekyll code blocks here
{% endraw %}
{% endhighlight %}

Wrapping the codes with raw tags first will stop it from being implemented and then wrapping it with highlight html will give it a more clear appearance.

And you may wonder how to include {% raw %} and {% endraw %}. Maybe you have seen many people tends to put \ before % but that does not display very well with \ itself also showing off.

Here is an elegant way to achieve this.

Put the first {% inside a raw tag, so escaping it avoids the rest being processed:

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

Or if you prefer you can escape both:

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

Both alternatives produces {% raw %} and {% endraw %}.

References