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 >}}
Hello World

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
  1. 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" >}})
Last Updated: 2025-10-05 Edit on GitHub