Earlier in the day, I had troubles to highlight my Nunjucks code here 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).
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" here 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.
This post was later published on blog.pagesd.info.
Cover illustration: It's raining code
Top comments (3)
Hi Michel,
I can definitely recreate the issue with the yaml front matter being elongated (more dashes than you added) - this appears to be a bug in forem's rendering of the code block.
I've filed a bug report at github.com/forem/forem/issues/15832 with this problem and a reproduction case. A good resource is forem.dev, if you have questions or problems with the software to share, and the github issues for forem (the software powering DEV) is the right place to share bugs like this.
We've seen this behavior before, and had fixed it in the past, this might be a situation where the fix only applied to the first code block, or a regression since that was done.
I did notice that "markdown" as a code highlight syntax doesn't highlight the yaml block the way you'd expect - "yaml" does, but this might not be what you want (since it's going to treat the body of the embedded markdown as syntactically special). There's probably some limit to how featureful a nested markdown document inside a code block can be -- I would not be surprised if the software got into the wrong state if a code block were embedded within a mardown document inside a code block.
Thank you for your answer and the bug report.
And it seems that the frontmatter in the first block is correctly highlighted.
Thank you very much Daniel for solving this little problem so quickly.