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
github.com/hugomods/bootstrapVersion

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
github.com/hugomods/shortcodesVersion

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.
razonyang
Sunday, November 3, 2024 Tuesday, April 11, 2023