Markdown notation in Hugo

This section shows how to write Markdown manuscripts in Hugo.

Basic Markdown

For more information on how to write Markdown, see Hugo - Markdown Guide.

Assign CSS classes to elements written in Markdown

See attribute in Goldmark - Hugo for more information. An overview is given below.

1. Put the following in /config.toml.
   

   [markup.goldmark.parser.attribute]
   block = true
   

2. Write class names such as {.classA .classB} on the next line of the block element written in Markdown in the original document.
   

   * Fruit
     * Apple
     * Orange
     * Banana
     {.fruits}
   * Dairy
     * Milk
     * Cheese
     {.dairies}
   {.list}
   

Write HTML directly instead of Markdown

See unsafe in Goldmark - Hugo for more information. An overview is given below.

1. Put the following in /config.toml.
   

   [markup.goldmark.renderer]
   unsafe = true
   

2. Write HTML for the manuscript.
   

   * Fruit            ← I can write Markdowns and ...
   * Dairy
   {.list}
   
   <ul class="list">  ← I can write HTML too.
     <li>Fruit</li>
     <li>Dairy</li>
   </ul>
   

Writing with shortcodes

Shortcodes are pre-defined HTML snippets by Hugo and various themes.
They include embedding videos and Instagram/Twitter articles that are difficult to express with Markdown alone, and generating links from manuscript paths that require server processing. See below for details.

Shortcode provider	URL
Hugo	https://gohugo.io/content-management/shortcodes/#what-a-shortcode-is
Theme:Beautiful Hugo	https://github.com/halogenica/beautifulhugo#extra-shortcodes
Theme:Docsy	https://www.docsy.dev/docs/adding-content/shortcodes/