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 code.
Extended Shortcodes
Module Path | Version |
---|
github.com/hugomods/shortcodes | |
The list of extended shortcodes.
Code Playground
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.