✔ How to use raw html in Markdown

Posted by thomas on Sunday, March 12, 2023

Steps to create raw html in Hugo Markdown files

Step 1 - Create .markdownlint.json

Create a .markdownlint.json file in the root of your project and add the html elements you want to allow into the allowed_elements array of the MD033 object.

{
  "MD033": {
    "allowed_elements": [
      "p",
      "span",
      "strong",
      "a"
    ]
  }
}

Step 2 - Create rawhtml.html

Create file rawhtml.html in folder layouts/shortcodes/.

<!-- raw html -->
{{.Inner}}

Step 3 - Use the shortcode

Now you can use this shortcode inside of any markdown file.

snippet

Or…

You set unsafe = true in config.toml to allow direkt html in markdown.

[markup]
  [markup.goldmark.renderer]
    unsafe = true # allow html in markdown

👍 Kudos go to Ana Ulin, whose amazing blogpost inspired this posting! 👍

 

comments powered by Disqus