Mark Llobrera

Eleventy: Escaping Nunjucks Statements in Markdown Code Blocks

A fun little wrinkle, but one with a very quick solution: if you have a code block containing any Nunjucks templates (and you’re using Nunjucks as your templating engine), you could end up with a TemplateContentRenderError. To get around it you can wrap the entire block in a {% raw %} [Stuff goes here] {% endraw %} block:

{% raw %}
<content type="html">
  <![CDATA[<p>{% image metadata.feed_reading.img_base_url + post.data.cover_image, post.data.title + " cover image" , "book_thumb" %}</p>
  <p>Started Reading: {{post.data.reading_start_date | readableDate }}</p>
  <p>Finished Reading: {{ post.data.reading_end_date | readableDate }}</p>
  {{ post.templateContent | safe }}]]>
</content>
{% endraw %}

To get the actual {% raw %} and {% endraw %} tags to render in the code block above, however, I had to add templateEngineOverride: md in the YAML front matter for this post, which tells Eleventy to only process Markdown, ignoring any Nunjucks tags1.


  1. As suggested in this Github issue. ↩︎