Shortcodes Reference & Usage Guide
Built-In Shortcodes
There are many built-in shortcodes in Hugo, you can see them here: https://gohugo.io/content-management/shortcodes/#embedded
Custom Shortcodes
Lichess Embed
Used to embed a Lichess game into the page. Parameters:
- game_id (required) — the Lichess game id.
- ply (optional) — move number to anchor to, e.g. ply=69.
- width (optional) — CSS width for the embed container (e.g. “80%”, “600px”); defaults to “100%”.
- caption (optional) — text displayed centered below the board.
Rendered example (default width):
Raw shortcode (won’t render):
{{< lichessgame game_id=BMuSp0Wt >}}
Examples:
-
Minimal:
{{< lichessgame game_id=BMuSp0Wt >}}
-
With a move (ply):
{{< lichessgame game_id=jrLkiOkY ply=69 >}}
-
With width (80%) and caption (caption appears centered below the board):
Hikaru makes a mistake {{< lichessgame game_id=jrLkiOkY ply=69 width="80%" caption="Hikaru makes a mistake" >}}
-
With fixed pixel width:
Compact board {{< lichessgame game_id=jrLkiOkY width="600px" caption="Compact board" >}}
Notes:
- width accepts any valid CSS width value; the board will scale to fill the container width.
- caption text is optional and will be centered beneath the board when provided.
Downloads
Used to insert the downloads HTML segment into the page. Do not use this on any page but the downloads page.
Example usage
{{< downloads >}}
Style
Adds an additional div with customizable class.
Example:
{{< style "button" >}}
Hello World
{{</ style >}}
Obsidian Style Alerts
Supported categories: note
, important
, info
, caution
, warning
, tip
Examples:
> [!note]
> This is a note alert.
Note This is a note alert.
> [!info]- Informational Title
> This is some informational text.
Informational Title
This is some informational text.
> [!important]
> Always comment your code
Important Always comment your code
> [!tip]- Best Starting Move
> 1. a3
Best Starting Move
- a3
> [!warning]- You Read This First
> and this second
You Read This First
and this second
> [!caution]
> Be careful with this step.
Caution Be careful with this step.
> [!tip]+ Best Practice
> Use strong passwords.
Best Practice
Use strong passwords.
Deprecated Shortcodes
Chess Diagram
Note Currently does not work
Chess Game
Note Currently does not work
File
Used in 2018 Blog Posts to place images, no longer needed with modern Hugo.
Example:
[]({{< file "Capture.PNG" >}})