Highlight Nunjucks code blocks with twig

#twig #nunjucks #markdown

I just discovered lately that, when writing Markdown, I can highlight Nunjucks code blocks using the twig flag! At least it works with Dev.to Markdown flavor. I had previously tryed the nunjucks tag without success and the html was missing some key highlights. Here's a comparition of the three.

With the nunjucks tag

---
permalink: formations/{{ video.snippet.title | lower | slug }}/
---
<section class="listing-section">
  {% for video in videos %}
    {% card
    defaultClass = 'listing-card',
    title = video.data.title,
    detail = video.data.publishedat | timeFormat,
    text = video.data.description,
    link = video.url | url,
    linkText = 'participe à la formation!'
    %}
  {% endfor %}      
</section>

With the html tag

---
permalink: formations/{{ video.snippet.title | lower | slug }}/
---
<section class="listing-section">
  {% for video in videos %}
    {% card
    defaultClass = 'listing-card',
    title = video.data.title,
    detail = video.data.publishedat | timeFormat,
    text = video.data.description,
    link = video.url | url,
    linkText = 'participe à la formation!'
    %}
  {% endfor %}      
</section>

With the twig tag

---
permalink: formations/{{ video.snippet.title | lower | slug }}/
---
<section class="listing-section">
  {% for video in videos %}
    {% card
    defaultClass = 'listing-card',
    title = video.data.title,
    detail = video.data.publishedat | timeFormat,
    text = video.data.description,
    link = video.url | url,
    linkText = 'participe à la formation!'
    %}
  {% endfor %}      
</section>

Ah, much better! Thanks for reading! 😊

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →