Jekyll Tip: Showing Liquid Code in Code Snippets

When blogging with Jekyll there are times when you want to be able to output a code snippet that contains what Jekyll thinks is liquid code. This especially happens when you are doing Angular tutorials since using the double brackets ({{ }}) for data binding. Since the code snippets are enclosed in a pre tag, you are not able to html encode the brackets.

Instead, to include liquid markup in the code snippet you need to surround the code snippet with the raw and endraw tags like so

{% raw %}
    {{ Notice the double brackets will be in the output }}
{% endraw %}

This will output:

{{ Notice the double brackets are output }}