Hugo shortcodes extend Markdown with custom components.
- Use
{{< >}}with percent delimiters for shortcodes that process inner content as Markdown. - Use angle bracket delimiters for raw HTML shortcodes.
Table
Define column widths for Markdown tables.
Ratio Syntax (recommended)
Use colon-separated numbers. Percentages are calculated automatically:
<div id="tbl-0" class="table-wrapper">
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Feature</td>
<td>A long description here</td>
<td>Active</td>
</tr>
</tbody>
</table>
</div>
<style>
#tbl-0 table {
table-layout: fixed;
display: table;
width: 100%;
}
#tbl-0 table th:nth-child(1),
#tbl-0 table td:nth-child(1) {
width: 0.3333%;
}
#tbl-0 table th:nth-child(2),
#tbl-0 table td:nth-child(2) {
width: 0.5000%;
}
#tbl-0 table th:nth-child(3),
#tbl-0 table td:nth-child(3) {
width: 0.1667%;
}
</style>
Renders as a 3-column table with widths 33.33%, 50%, 16.67%.
Percent Syntax (legacy)
Comma-separated percentage values:
<div id="tbl-1" class="table-wrapper">
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Feature</td>
<td>A long description here</td>
<td>Active</td>
</tr>
</tbody>
</table>
</div>
<style>
#tbl-1 table {
table-layout: fixed;
display: table;
width: 100%;
}
#tbl-1 table th:nth-child(1),
#tbl-1 table td:nth-child(1) {
width: 20%;
}
#tbl-1 table th:nth-child(2),
#tbl-1 table td:nth-child(2) {
width: 60%;
}
#tbl-1 table th:nth-child(3),
#tbl-1 table td:nth-child(3) {
width: 20%;
}
</style>
Auto Layout
Omit cols to use browser auto-sizing based on content:
<table>
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>Demo</td>
</tr>
</tbody>
</table>
Parameters
| Parameter | Required | Description |
|---|---|---|
cols | No | Column widths. Ratio ("2:3:1") or percent ("20%,60%,20%"). |
Embed
Embed external pages via iframe (desktop) or link card (mobile).
| Parameter | Default | Description |
|---|---|---|
url | (required) | Page URL to embed. |
title | Same as url | Display title. |
height | "600" | Iframe height in pixels. |
Mermaid
Render Mermaid diagrams with dark mode support.
graph LR
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[End]
graph LR
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[End]
Mermaid JS is loaded once per page. Diagrams re-render on theme toggle.
Tips
Colored callout boxes with four severity levels.
Did you know?
This is an informational tip.
Caution
Be careful with this setting.
Types
| Type | Color | Use case |
|---|---|---|
info | Blue | Helpful notes |
warn | Yellow | Warnings |
error | Red | Error messages |
success | Green | Success confirmations |
Parameters
| Parameter | Position | Required | Description |
|---|---|---|---|
| type | 1st | Yes | One of info, warn, error, success |
| title | 2nd | No | Bold heading text |
Figure
Enhanced image with optional caption, link, and attribution.
SunsetA beautiful sunset
Parameters
| Parameter | Default | Description |
|---|---|---|
src | (required) | Image source URL. |
alt | Alt text. Falls back to caption. | |
link | Same as src | Click-through URL. |
target | "_blank" | Link target. |
rel | Link rel attribute. | |
title | Image title. | |
caption | Caption below image (Markdown supported). | |
attr | Attribution text. | |
attrlink | Attribution link URL. | |
width | Image width. | |
height | Image height. | |
class | "image-container" | CSS class for wrapper. |
Plist
Property list rendered as a key-value table.
Name
Alice
Age
30
City
Beijing
Renders as a two-column table with keys as header cells and values as data cells (Markdown supported).
Raw
Output inner content as raw HTML, bypassing Markdown processing.
Hello world
Video
Embed an autoplay looping video.
The video element fills 100% width with controls, muted playback, looping, and autoplay enabled.