Include HTML in Jekyll front matter (post title)

user_13729466 0
Viewed 683

How can I place HTML tags in a Jekyll post’s (YAML-encoded) front matter and stop this HTML from being escaped in the final output? My content, including titles of posts, uses multiple languages in addition to the main page language and this requires proper markup with span lang="XX" tags for screen readers and certain automated extraction. However, attempting to write the following:

---
layout: post
title: A post that says <span lang="fr">Bonjour</span> and <span lang="es">Hola</span>
---

results in HTML output where these tags have been escaped:

<h1 class="post-title p-name" itemprop="name headline">A post that says &lt;span lang=&quot;fr&quot;&gt;Bonjour&lt;/span&gt; and &lt;span lang=&quot;es&quot;&gt;Hola&lt;/span&gt;</h1>

I am using Jekyll minima theme.

jekyll
1 Answers

So on the minima theme of Jekyll, that you are using, there is an escape filter that have been set per design on the page.title.

From the documentation:

Escapes a string by replacing characters with escape sequences (so that the string can be used in a URL, for example). It doesn’t change strings that don’t have anything to escape.

Source: https://shopify.github.io/liquid/filters/escape/

If you want your span to display, you should edit the file _layouts/post.html and remove this espace filter.

Your line 7 of this file should look like

    <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>

Source: https://github.com/jekyll/minima/blob/49f6dce0727a2441f0b0c265b41b5efc7b042eb6/_layouts/post.html#L7

Change it so it reads 

    <h1 class="post-title p-name" itemprop="name headline">{{ page.title }}</h1>

And you will have your expected behaviour.

user_21235300
Related