The Hoof & Paw
DocsCategoriesTagsView the current conditions from the WolfspyreLabs WeatherstationToggle Dark/Light/Auto modeToggle Dark/Light/Auto modeToggle Dark/Light/Auto modeBack to homepage
  1. 🐺🔥⚗️™
  2. /
  3. Snippits
  4. /
  5. Hugo Native
  6. /
  7. Native Shortcodes
Edit page

Native Shortcodes

Hugo has several built-in shortcodes.

Lets go over them here:

Gist
Takes the user and gist ID as parameters and renders a GitHub gist. You can also pass a filename if the gist has multiple files.
Ref
Takes a file path in the Hugo website and provides an absolute link to that file. If the url or slug is overridden in the front matter of a page, the ref shortcode follows the newly provided location.

[Neat]({{</* ref "blog/neat.md" */>}})

results in:

<a href="https://example.com/blog/neat"> Neat <//a>
Relref
Provides the relative link to the file in the Hugo website.

This shortcode works similar to ref.

[Who]({{</* relref “about.md#who” */>}})

results in:

<a href="https://example.com/about#who">who</</a>
Figure
Renders an image with a caption.
Example here
Tweet
Renders a Tweet with the given ID.
Example Here
Instagram
Embeds an Instagram image with the given ID.
Example here
Vimeo
Renders a Vimeo video with the given ID.
example here
Youtube
Renders a YouTube video with the given ID.
example here
Highlight
Adds syntax highlighting for the provided source code.
Param
Prints a passed parameter (useful for debugging purposes as well).
example here