Two highlight problems on dev.to

2021-12-21 #11ty

Yesterday, I had troubles to highlight my Nunjucks code on dev.to. Also, I had a very strange bug with my markdown snippets.

How to highlight Nunjucks on dev.to?

According to Forem technical docs, they use Rouge to highlight code snippets. Rouge can highlight over 200 different languages. But not Nunjucks... On the other hand, it supports Liquid, Jinja and Twig who look a lot like Nunjucks.

So I did some tests directly on dev.to (where results are much more relevant than here on my blog where I don't highlight code).

Using ```liquid

<!DOCTYPE html>
<html lang="{{ site.lang }}">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }} - {{ site.title }}</title>
</head>
<body>
  <!-- Le contenu généré par Eleventy sera ajouté là -->
  {{ content | safe }}
</body>
</html>

Using ```jinja

<!DOCTYPE html>
<html lang="{{ site.lang }}">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }} - {{ site.title }}</title>
</head>
<body>
  <!-- Le contenu généré par Eleventy sera ajouté là -->
  {{ content | safe }}
</body>
</html>

Using ```twig

<!DOCTYPE html>
<html lang="{{ site.lang }}">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }} - {{ site.title }}</title>
</head>
<body>
  <!-- Le contenu généré par Eleventy sera ajouté là -->
  {{ content | safe }}
</body>
</html>

Solution

Liquid doesn't work. Probably because it's the template used by Forem. Jinja and Twig are fine. So I will write my Nunjucks examples by starting my code blocks with ```jinja.

A bug with Markdown highlight?

I don't know why, but my Markdown code snippets are not all properly highlighted. If you search for "layout: layout.njk" in my post "Création de mon site Eleventy" on dev.to, the first frontmatter is correctly highlighted. But not in the second and third snippets.

I always wrote:

---
layout: layout.njk
---
...

But the last two times, it generates too many dashes. And it can't to recognize my code anymore?

--------
layout: layout.njk
--------
...

Note: Maybe it's not related to ```markdown, because it also does it with only ``` at the beginning of the code. On dev.to, I write -------- (8 dashes) to show exactly what I get on my previous post and it generates ------------- (13 dashes) instead :)

And if I move these two blocks at the beginning of my post, the highlight is magically fixed...

If anyone has the solution, I'm curious. But it's not that bad.

Note: It's fixed! Many thanks to Daniel for solving this problem so quickly and to the whole Forem team for building such a good product.

Sure, I don't have all this problems on my blog. But to be fair, all snippets are just raw code.