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 X shortcode to output a Tweet. It requires two named parameters user and id.
{{< x 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
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 >}}
This example embeds a Instagram post. More info here
{{< instagram CxOWiQNP2MO >}}
QR Code
This example inserts QR code
{{< qr text="https://mnjm.github.io/kayal/" >}}
