Using a WBR Tag in Hugo Markdown

Posted on:

Tagged as: .

If you have long paths in your blog content they can be an issue on mobile screens, they don’t wrap and can cause layout problems.

Markdown doesn’t appear to have an equivalent syntax and Hugo seems to strip out a raw <wbr> when included in an .md file even when the content is run through the safeHTML filter.

My answer was to setup arguably the most simple shortcode I can to get around this and as such is a pretty good bare bones example of using shortcodes.

Setting Up a Shortcode in Hugo

In your theme/layout/shortcodes folder create a file called wbr.html. Open that file and type <wbr>.

Open your markdown file and simply add . Now when your content renders it will contain a <wbr> tag.