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.
-
Put the following in
/config.toml
.
[markup.goldmark.parser.attribute] block = true
-
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.
-
Put the following in
/config.toml
.
[markup.goldmark.renderer] unsafe = true
-
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/ |
Top comments (0)