Fix for raw HTML omitted in Hugo static generator

In this short tutorial, Learn what causes the raw HTML committed and how to fix it.

Posted about solutions for the below errors

  • add raw HTML post to Hugo not displayed
  • HTML tags are not parsed in markdown files

Hugo shortcodes place custom HTML, and javascript in go HTML template files in Hugo content files which generates process HTML during Hugo template processing.

For example, I have written shortcode rawhtml that displays the HTML code in content pages partial/shortcode/rawhtml.html

{{.Inner}}

Inside the content folder and rawhtml, the shortcode is used in the markdown file as seen below This prints the raw html to html UI pages, you have to use a shortcode wrapped with html code.

<div styles="font-weight:700">Inline styles example</div>

Somehow, the shortcode displays nothing and gives raw HTML committed to an error in generated HTML

if you are using HTML and javascript in Hugo shortcodes, display nothing in HTML. During inspecting generated HTML code, Hugo shortcode displays “raw HTML omitted” in HTML content.

What causes raw HTML

This error is caused due to the markdown rendered not understanding your HTML in the shortcode.

From Hugo V.0.60, the default markdown renderer is the Gold mark.

Goldmark renders engine ignores raw HTML by default. So you have to tell by using configuration parameters.

The solution enables the Markdown renderer to use Goldmark render to consider raw HTML with configuration.

Fix is to markup.goldmark.renderer.unsafe: true in configuration file.

if you are using config.yaml file

markup:
  goldmark:
    renderer:
      unsafe: true

For config.toml file

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

Conclusion

To Sum Up, Learn to understand Goldmark markdown rendered and ignoring raw HTML, and fix for it.