Rich Content and Hugo Shortcodes
Table of Contents
Hugo ships with several built-in shortcodes for rich content, along with a privacy config and a set of simple shortcodes that enable static and no-JS versions of various social media embeds.
YouTube
Below is an example using the built-in youtube shortcode.
{{< youtube ErMSHiQRnc8 >}}
This example uses the twitter shortcode to output a Tweet. It requires two named parameters user and id.
{{< twitter user="HugoConf" id="1684306258533441540" >}}
We love this video! And if you can learn that much in just 100 seconds, imagine how much you’ll learn, for free, from HugoConf 2023 — a whole day of free @GoHugoIO talks and workshops on September 21. Register now at https://t.co/4af2jnNMyUhttps://t.co/mSfqzEGGbR
— Hugo Conf (@hugoconf) July 26, 2023
Gist
The gist shortcode can be used to embed a GitHub Gist. It requires two unnamed parameters: the username and ID of the Gist.
{{< gist mnjm 5857c03e619f805f579929e0d8b04d34 >}}
Vimeo
The vimeo shortcode will embed a Vimeo video.
{{< vimeo 64575379 >}}
Highlight
Code block can be highlighted with Hugo’s internal highlight shortcode. Available options .
{{< highlight html >}}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
{{< /highlight >}}