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.
Shortcode to open links in new tab
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
inlayouts/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.
Leave a Reply