This article will briefly describe how to use shortcodes to enrich your content and list some of the available shortcodes.

Using Shortcodes

Learn more on use shortcodes.

Hugo Built-in Shortcodes

  • Figure: an extension of the image syntax in Markdown.
  • Gist: to display a GitHub gist.
  • Highlight: to display a highlighted code.
  • Instagram: to display an Instagram post.
  • Param: gets a value from the current Page’s params set in front matter, with a fallback to the site param value.
  • ref and relref: return the permalink (ref) or relative permalink (relref) for the given page.
  • Tweet: to display a Twitter post.
  • Vimeo: to display a Vimeo video.
  • YouTube: to display a YouTube video.

Bootstrap Shortcodes

Module PathVersion

A list of Bootstrap shortcodes.

  • Alert: generate alert messages, supports styling, icon and heading.
  • Clearfix: clear floated content, such as floating pictures.
  • Collapse: hide and show content.
  • Config Toggle: generate a configuration toggle from one code base, YAML, TOML and JSON are supported.
  • Icon Grid: display a icon grid with icon, heading and description.
  • Lead: make a paragraph stand out.
  • Ratio: perfect for responsively handling video or slideshow embeds based on the width of the parent.
  • Toggle: much more versatile than config toggle, designed for any content, such as SDK code.

Extended Shortcodes

Module PathVersion

The list of extended shortcodes.

Code Playground

Media Player

Shortcodes Provided by Modules

You may need to install the corresponding modules to use the following shortcodes.

  • Encrypt: encrypt contents.
  • Icon: display a icon.
  • Image Link: pop up an image when click the image link.
  • KaTex: math typesetting.
  • Mermaid: uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams.
  • Video.js: make your videos player yours.