How to render HTML in Hugo

Posted on One min read

From Hugo safeHTML Function

How to render HTML in Hugo

Hugo tries to keep things secure - one of the ways it does this is by treating any variable declared in a config.toml file as insecure. In my case I am storing the site description with an added <br /> for the line break.

[params.info]
description = """Blogging about
<br />
Tech | DevOps | Agile
"""

Out of the box this will render as Blogging about <br /> Tech | DevOps | Agile all on one line as Hugo will interpret it as text and not HTML.

In order for it to show up correctly you have to tell hugo that it is safeHTML

For my theme I had to do the following: Create an override file in /layouts/partials/widgets/about.html and another one in /layouts/partials/header.html. Copy the contents from the template files and then make the following changes:

For it to work on my site I had to change the Site.Params.info. from

{{- .Site.Params.info.description -}}

to

{{- .Site.Params.info.description | safeHTML -}}

This will tell hugo to render HTML allowing you to store HTML in your config.toml file.