Fix HTML not working in Hugo

By default, Hugo does not render HTML (and JavaScript). So you can’t use HTML tags in the markdown files. To enable this, change the following setting in config.yml:

markup: goldmark: renderer: unsafe: true
Code language: YAML (yaml)

If your theme uses TOML or JSON, you can get instructions for these here.

If HTML rendering is enabled in Hugo as mentioned above, then you can just use <a href="example.com" target="_blank"> in the markdown files and it will work. But if you like to have a more consistent Hugo syntax in your hugo-markdown files, then you can create and use a shortcode. This just converts the shortcode in your md file into HTML to be rendered on the page.

  • Create a shortcode file opennewtab.html in layouts/shortcodes/
  • Add this line to the file:
<a href="{{ .Get "href" }}" rel="noopener" target="_blank">{{ .Get "title" }}</a>
Code language: HTML, XML (xml)
  • You can now use the shortcode in your hugo-markdown file
{{< opennewtab href="http://example.com" title="Example" >}}
Code language: HTML, XML (xml)

Reference site for more details.


Posted

in

by

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *