DEV Community

Cover image for Highlight Nunjucks code blocks with twig
Mathieu Huot
Mathieu Huot

Posted on

1

Highlight Nunjucks code blocks with twig

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Ah, much better! Thanks for reading! 😊

Heroku

Deliver your unique apps, your own way.

Heroku tackles the toil — patching and upgrading, 24/7 ops and security, build systems, failovers, and more. Stay focused on building great data-driven applications.

Learn More

Top comments (0)

AWS Industries LIVE! Stream

Watch AWS Industries LIVE!

New tech. Real solutions. See what’s possible on Industries LIVE! with AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay