Shortcodes
Created:
Introduction
Shortcodes are a way to embed additional content in your Markdown files. They are a powerful feature of Zola and can be used to embed content like images, videos, or other HTML elements. In this post, I will show you how to use shortcodes in Zola.
Shortcodes
Images
The image
shortcode can be used to embed images in your Markdown files. This can be useful for adding visual elements to your posts. Here is an example of how to use the image
shortcode:

Please note that the shortcode normale start and end with {{
and }}
. But in this example the shortcode start and end with \{\{
and \}\}
. This is necessary to render the shortcode in the Markdown file.
\{\{ image(src="example-image.jpg", alt="Example image show a cityscape at dusk with modern buildings, a river, and a prominent tower. The sky is painted with hues of pink and blue, reflecting on the water. The scene is calm and picturesque, capturing the essence of a serene urban evening.") \}\}
The path
parameter specifies the path to the image file, the src
parameter specifies the filename of the image, and the alt
parameter specifies the alt text for the image.

\{\{ image(src="example-image.jpg", alt="Example image show a cityscape at dusk with modern buildings, a river, and a prominent tower. The sky is painted with hues of pink and blue, reflecting on the water. The scene is calm and picturesque, capturing the essence of a serene urban evening.", width=800, height=300) \}\}
The width
and height
parameters can be used to specify the size of the image. The width
and height
parameters are optional and can be omitted if you want to use the original size of the image.
Details
The details
shortcode can be used to create a collapsible section in your Markdown files. This can be useful for hiding additional information or content that is not essential to the main text. Here is an example of how to use the details
shortcode:
Click to expand
This is the content that will be hidden by default. You can click on the summary above to expand or collapse this section.
Please note that the shortcode normale start and end with {{
and }}
. But in this example the shortcode start and end with \{\{
and \}\}
. This is necessary to render the shortcode in the Markdown file.
\{\{ details(title="Click to expand", summary="This is a summary" content=`This is the content that will be hidden by default. You can click on the summary above to expand or collapse this section.`) \}\}
Markdown
The markdown
shortcode can be used to render Code within your Markdown files. This can be usefull to embed Code examples and the Source of the examples. Here is an example that render a HTML form and the Source.
Source
<form>
<input type="number" step="1" />
<input type="submit" />
</form>
<p>Input value: <span></span></p>
<script>
document.querySelector("form").addEventListener("submit", (e) => {
e.preventDefault();
document.querySelector("span").innerText = e.target.querySelector("input").value;
});
</script>
Please note that the shortcode normale start and end with {{
and }}
. But in this example the shortcode start and end with \{\{
and \}\}
. This is necessary to render the shortcode in the Markdown file.
\{\{ markdown(title="input attr type is number and attr step is 1" type="html", code='
<form>
<input type="number" step="1" />
<input type="submit" />
</form>
<p>Input value: <span></span></p>
<script>
document.querySelector("form").addEventListener("submit", (e) => {
e.preventDefault();
document.querySelector("span").innerText = e.target.querySelector("input").value;
});
</script>
') \}\}
Icons
The icon
shortcode can be used to embed icons in your Markdown files. This can be useful for adding visual elements to your posts. Here is an example of how to use the icon
shortcode:
Please note that the shortcode normale start and end with {{
and }}
. But in this example the shortcode start and end with \{\{
and \}\}
. This is necessary to render the shortcode in the Markdown file.
\{\{ icon(name="activity",size=32) \}\}
The size of the icon can be adjusted by adding the size
parameter to the shortcode. The default size is 32 pixels, but you can specify a different size. The parameter is optional and can be omitted if you want to use the default size.
All available icon names can be found on the icon page.
Youtube
The youtube
shortcode can be used to embed YouTube videos in your Markdown files. This can be useful for including video content in your posts. Here is an example of how to use the youtube
shortcode:
Please note that the shortcode normale start and end with {{
and }}
. But in this example the shortcode start and end with \{\{
and \}\}
. This is necessary to render the shortcode in the Markdown file.
\{\{ youtube(id="Pb4Naef8pc8", title="loop") \}\}
Spotify
The spotify
shortcode can be used to embed Spotify playlists in your Markdown files. This can be useful for including music playlists in your posts. Here is an example of how to use the spotify
shortcode:
Please note that the shortcode normale start and end with {{
and }}
. But in this example the shortcode start and end with \{\{
and \}\}
. This is necessary to render the shortcode in the Markdown file.
\{\{ spotify(id="6rqhFgbbKwnb9MLmUQDhG6", title="album") \}\}
Conclusion
Shortcodes are a powerful feature of Zola that can be used to embed additional content in your Markdown files. They are easy to use and can help you create more dynamic and interactive posts. I hope this post has given you a good overview of how to use shortcodes in Zola. If you have any questions or need further assistance, feel free to leave a comment below. Happy coding!
Feedback
Have thoughts or experiences you'd like to share? I'd love to hear from you! Whether you agree, disagree, or have a different perspective, your feedback is always welcome. Drop me an email and let's start a conversation.