Eleventy syntax highlighting HTML

I’m currently in the process of moving my beloved WordPress blog over to Eleventy and it’s been a really awesome opportunity to learn some new things. During the migration, I noticed my syntax highlighting for HTML tags looked a little weird. The lines were highlighted and the text was all caps.

Example syntax showing the strange HTML syntax highlighting I was getting with Eleventy.

Turns out, in my .eleventy.js file, the default Markdown template engine setting is markdownTemplateEngine: "liquid"

Since the Markdown template engine is liquid, using the Markdown syntax highlighting was causing some funky effects. Once I switched the the Liquid syntax highlighting method of {% highlight php %}, it looked more like I expected it would.

Captions after I used the Liquid syntax highlighting method with Eleventy.

Related Post

What do you think?