I like how Odyssey Dao highlights some parts of its titles. If I were writing standard html, I would replicate the effect adding a span with a class to create a style in CSS.

However, in eleventy the front matter is parsed as text. In other words is I write “Title <span> highlighted word </span> en of title” the output is : “Title <span> highlighted word </span> en of title”

In other words, the span tags are visible.

I searched and found that Jekyll deals with these cases using { title | markdownify } , but when I used it, Eleventy spitted the same result.

Except now I could write in markdown. So: Title **highlighted** end of title became Title <strong>highlighted</strong> end of title which was not the desired result neither.

However, this revelation pointed me in the right direction. I needed a “pipe filter”.

The only other filter I’ve used in eleventy was | safe. However, I thought it was only meant to be used with markdown as I had only used it in the content.

However, when used in the front matter, you can write the tag's contents in pure html. So { title | safe }, outputs the correct HTML.

This way, you can add spans, bolds, and italics to your frontmatter in eleventy.