Markdown Extras

These are some extras that have been added on top of default markdown syntax support. This enables quite a bit of handy features that is not available in vanilla Hugo.

Blockquotes #

A normal blockquote can be rendered using:

> This is a blockquote.

… which is rendered as:

Apart from above vanilla style, blockquote supports below extras -

Blockquote Citation and Caption #

Extra options can be passed to blockquotes to add citations and captions:

> This is a blockquote with cite and captions.
{cite="https://gohugo.io" caption="Associated caption"}

… which is rendered as:

Alert-Style Blockquotes #

The style of blockquotes can be changed using alert syntax. Five alert types are supported: NOTE, TIP, IMPORTANT, WARNING, and CAUTION.

Static Alert #

> [!WARNING]
> Urgent info that needs immediate attention.

… which is rendered as:

Collapsible Alert (Expanded by Default) #

Use + to make the alert collapsible and expanded by default:

> [!WARNING]+
> Urgent info that needs immediate attention.

… which is rendered as:

Collapsible Alert (Collapsed by Default) #

Use - to make the alert collapsible and collapsed by default:

> [!TIP]-
> Click the arrow to expand this tip.

… which is rendered as:

All Alert Types #

> [!NOTE]
> Useful information that users should know.

> [!TIP]
> Helpful advice for doing things better.

> [!IMPORTANT]
> Key information users need to know.

> [!WARNING]
> Urgent info that needs immediate attention.

> [!CAUTION]
> Advises about risks or negative outcomes.

… which is rendered as:

Custom Alert Titles #

You can provide a custom title after the alert type and fold indicator. If no custom title is provided, the alert type (e.g., “Warning”, “Tip”) is used as the title.

> [!WARNING]+ Radiation hazard
> Do not approach or handle without protective gear.

> [!TIP]- Pro tip
> Always save your work frequently to avoid data loss.

> [!IMPORTANT] Critical update required
> Please upgrade to version 2.0 before January 1st.

… which is rendered as:

Blockquote Width and Alignment #

Blockquotes support width and align attributes:

• width: compact (fits content), full (default, page width), wide (viewport width)
• align: left (default), center, right

Example:

> [!NOTE]
> Useful information that users should know.
{width="compact", align="center"}

which is rendered as -

Codeblocks #

Standard code block with language syntax highlighting:

```go
package main

func main() {
    println("Hello, World!")
}
```

… which is rendered as:

package main

func main() {
    println("Hello, World!")
}

Custom Display Label #

Use the display attribute to show a custom label (like a filename) instead of the language name:

```go {display="main.go"}
package main

func main() {
    println("Hello, World!")
}
```

… which is rendered as:

package main

func main() {
    println("Hello, World!")
}

Hide Language Label #

Use showLang=false to hide the language label:

```python {showLang=false}
def hello():
    print("Hello, World!")
```

… which is rendered as:

def hello():
    print("Hello, World!")

Hide Copy Button #

Use showCopy=false to hide the copy button:

```javascript {showCopy=false}
console.log("Hello, World!");
```

… which is rendered as:

console.log("Hello, World!");

Codeblock Width and Alignment #

Code blocks support width and align attributes:

• width: compact (default, fits content), full (page width), wide (viewport width)
• align: left (default), center, right

Example:

```javascript {width="compact", align="center"}
console.log("Hello, World!");
```

console.log("Hello, World!");

Image #

A normal image can be rendered as -

![alt text](path/to/image.jpg)

… which is rendered as:

Image with caption #

![alt text](path/to/image.jpg "Associated caption")

… which is rendered as:

Image Pre-processing #

![pexels-veeterzy-38136](images/pexels-veeterzy-38136.jpg "Associated Caption")
{process="resize 350x|r90"}

… which is rendered as:

Refer Hugo | Image Processing for complete list of transformation options.

Image Width and Alignment #

Images support width and align attributes:

• width: compact (default, fits content), full (page width), wide (viewport width)
• align: left (default), center, right

Example:

![pexels-veeterzy-38136](images/pexels-veeterzy-38136.jpg "Associated Caption")
{width="wide"}

… which is rendered as:

Links #

All external links are by default indicated with a and opens in a new tab, e.g: hugo.io.

You can configure default behavior for all links at global/kind/section/type level your hugo.yaml:

params:
  openExternalLinkInNewTab: true      ## Open external links in new tab by default
  showExternalLinkIndicator: true     ## Show external link indicator by default

or set the same in front-matter to set a default on per-page basis.

Tables #

Standard markdown tables can be created using pipe syntax:

| Header 1 | Header 2 | Header 3 |
| -------- | -------- | -------- |
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

… which is rendered as:

Table Caption #

Add a caption to your table using the caption attribute:

| Product  | Price | Stock |
| -------- | ----- | ----- |
| Laptop   | $999  | 15    |
| Mouse    | $25   | 50    |
| Keyboard | $75   | 30    |
{caption="Table 1: Product inventory as of November 2025"}

… which is rendered as:

Table Width and Alignment #

Tables support width, align, and caption attributes:

• width: compact (default, fits content), full (page width), wide (viewport width)
• align: left (default), center, right

Example:

| Product  | Price | Stock |
| -------- | ----- | ----- |
| Laptop   | $999  | 15    |
| Mouse    | $25   | 50    |
| Keyboard | $75   | 30    |
{caption="Table 1: Product inventory as of November 2025", width="full"}

… which is rendered as: