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 Path	Version
github.com/hugomods/bootstrap

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 codes.

Extended Shortcodes

Module Path	Version
github.com/hugomods/shortcodes

The list of extended shortcodes.

Code Playground

• CodePen: to display CodePen code.
• JSFiddle: to display JSFiddle code.
• JSRun: to display JSRun code.

Media Player

• Asciinema: to display asciinema video.
• Bilibili: to display a Bilibili video.
• NetEase Cloud Music: to display NetEase cloud music player.
• YouKu: to display a YouKu video.

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.