To override Hugo’s embedded details shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
Example # With this markup:
{{< details summary="See the details" >}} This is a **bold** word. {{< /details >}} Hugo renders this HTML:
<details> <summary>See the details</summary> <p>This is a <strong>bold</strong> word.</p> </details> Which looks like this in your browser:
This is a **bold** word. Parameters # summary (string) The content of the child summary element rendered from Markdown to HTML.
...
To override Hugo’s embedded figure shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
Example # With this markup:
{{< figure src="/images/examples/zion-national-park.jpg" alt="A photograph of Zion National Park" link="https://www.nps.gov/zion/index.htm" caption="Zion National Park" class="ma0 w-75" >}} Hugo renders this HTML:
<figure class="ma0 w-75"> <a href="https://www.nps.gov/zion/index.htm"> <img src="/images/examples/zion-national-park.jpg" alt="A photograph of Zion National Park" > </a> <figcaption> <p>Zion National Park</p> </figcaption> </figure> Which looks like this in your browser:
...
Deprecated in v0.143.0.
The gist shortcode was deprecated in version 0.143.0 and will be removed in a future release. To continue embedding GitHub Gists in your content, you’ll need to create a custom shortcode:
Create a new file: Create a file named gist.html within the layouts/shortcodes directory. Copy the source code: Paste the [original source code] of the gist shortcode into the newly created gist.html file. This will allow you to maintain the functionality of embedding GitHub Gists in your content after the deprecation of the original shortcode.
...
To override Hugo’s embedded highlight shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
With the Markdown [content format], the highlight shortcode is rarely needed because, by default, Hugo automatically applies syntax highlighting to fenced code blocks.
The primary use case for the highlight shortcode in Markdown is to apply syntax highlighting to inline code snippets.
The highlight shortcode calls the [transform.Highlight] function which uses the [Chroma] syntax highlighter, supporting over 200 languages with more than 40 [available styles].
...
To override Hugo’s embedded instagram shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
Example # To display an Instagram post with this URL:
https://www.instagram.com/p/CxOWiQNP2MO/ Include this in your Markdown:
{{< instagram CxOWiQNP2MO >}} Huge renders this to:
View this post on Instagram Privacy # Adjust the relevant privacy settings in your site configuration.
hugo. yaml toml json privacy: instagram: null [privacy] { "privacy": { "instagram": null } } disable (bool) Whether to disable the shortcode.
...
To override Hugo’s embedded param shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
The param shortcode renders a parameter from front matter, falling back to a site parameter of the same name. The shortcode throws an error if the parameter does not exist.
example.md --- title: Example date: 2025-01-15T23:29:46-08:00 params: color: red size: medium --- We found a {{% param "color" %}} shirt.
...
To override Hugo’s embedded qr shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
The qr shortcode encodes the given text into a [QR code] using the specified options and renders the resulting image.
Internally this shortcode calls the images.QR function. Please read the [related documentation] for implementation details and guidance.
Examples # Use the self-closing syntax to pass the text as an argument:
...
To override Hugo’s embedded ref shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
When working with the Markdown [content format], this shortcode has become largely redundant. Its functionality is now primarily handled by [link render hooks], specifically the embedded one provided by Hugo. This hook effectively addresses all the use cases previously covered by this shortcode.
The ref shortcode returns the permalink of the given page reference.
...
To override Hugo’s embedded relref shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
When working with the Markdown [content format], this shortcode has become largely redundant. Its functionality is now primarily handled by [link render hooks], specifically the embedded one provided by Hugo. This hook effectively addresses all the use cases previously covered by this shortcode.
The relref shortcode returns the relative permalink of the given page reference.
...
To override Hugo’s embedded vimeo shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
Example # To display a Vimeo video with this URL:
https://vimeo.com/channels/staffpicks/55073825 Include this in your Markdown:
{{< vimeo 55073825 >}} Hugo renders this to:
Parameters # class (string) The class attribute of the wrapping div element. Adding one or more CSS classes disables inline styling. id (string) The id of the Vimeo video title (string) The title attribute of the iframe element.
...