Day 7 - Escaping code in 11ty

Eurgh. Again, I've spent 20 minutes trying to understand how to display HTML in 11ty. So here's a cheat sheet for me. So I can save time in the future.

inline code

If you want inline <code> blocks as part of your paragraph text, wrap it in a tick `.

... ine `<code>` blocks a...

This won't work if the code you want to display is wrapped in braces {{ }} . If you want to display this code, you need to wrap your code in raw tags like {% raw %} ... {% endraw %}

{% raw %} {{ post.data.description }} {% endraw %}

Code blocks

To wrap a code block in a <pre> tag, you need to indent by 4 spaces in markdown. If your tab setting is set to 4 spaces, you could use a tab to. I tab to 2 spaces, so I need to tab twice to make up 4 spaces.

<strong>Does anyone else find #eee a little bit grey?</strong>

If you want to add some code to a code block that uses braces { }, then you'll need to wrap these in raw tags too...

{% raw %}
    {%- if post.data.description -%}
      <p class="archive__postdesc">
        {{ post.data.description }}
      </p>
    {%- endif -%}
{% endraw %}

And if you want to display the raw tags as part of your code block, you need to add them twice.

{% raw %}
{% raw %}
    {%- if post.data.description -%}
      <p class="archive__postdesc">
        {{ post.data.description }}
      </p>
    {%- endif -%}
{% endraw %}
{% endraw %}

Hopefully this saves me some time in the future!