Chapter 4

Shortcodes

Hugo uses Markdown as its content format. However, there are a lot of things that Markdown doesn’t support well.

You could use pure HTML to expand your possibilities. But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read. You should avoid HTML to keep it as simple and portable as possible.

To avoid Markdown’s limitations, Hugo created shortcodes. A shortcode is a simple snippet inside of a page.

The Relearn theme provides many shortcodes on top of Hugo’s existing ones.

Badge

Marker badges to display in your text

Button

Clickable buttons

Children

List the child pages of a page

Expand

Expandable/collapsible sections of text

Highlight

Render code with a syntax highlighter

Icon

Nice icons for your page

Include

Displays content from other files

Math

Beautiful math and chemical formulae

Mermaid

Generate diagrams and flowcharts from text

Notice

Disclaimers to help you structure your page

OpenAPI

UI for your OpenAPI / Swagger specifications

Resources

List resources contained in a page bundle

SiteParam

Get value of site params

Tab

Show content in a single tab

Tabs

Show content in tabbed views