DEV Community

Cover image for Markdown notation in Hugo
ayaco
ayaco

Posted on • Originally published at ayaco.gitlab.io

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.

Markdown Guide(https://www.markdownguide.org/)

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.

Top comments (0)