Hugo - Pavel B. Vasiliev. Blog. https://pavel.su/en/tags/hugo/ Hugo - static site generator (SSG) software Hugo -- gohugo.io en-US Sat, 14 Nov 2026 16:22:15 +0000 Markdown Formatting in Hugo Pocket https://pavel.su/en/it/markdown-for-hugo-pocket/ Tue, 03 Nov 2026 01:00:00 +0000 https://pavel.su/en/it/markdown-for-hugo-pocket/ Markdown formatting elements with rendered examples for the Hugo Pocket theme. A guide to Markdown formatting and shortcodes in Hugo Pocket, with live examples.

Description

The description field in a page’s Markdown front matter sets the short description shown at the top of the page and beneath the post title in article lists on the homepage, category pages, tag pages, and elsewhere.

+++
...
description = "Markdown formatting elements with rendered examples for the Hugo Pocket theme."
...
+++

Headings

# Level 1 heading

## Level 2 heading

### Level 3 heading

…

(You can see rendered examples throughout this article.)

Text Formatting

Basic text formatting: **bold** bold, *italic* italic, ***bold italic*** bold italic, `inline code` inline code, ~~strikethrough~~ strikethrough, and <u>underlined text</u> underlined text.

Backticks

A single backtick on each side creates inline code. Inline code has no copy button.

Three backticks on their own lines create a code block with a copy button.

To show a code fence made of three backticks, wrap the example in a fence made of four backticks.

Horizontal Rule

To insert a horizontal rule, put this on its own line:

---

[Link to Hugo](https://gohugo.io/) renders as Link to Hugo.

{{< friendlinks >}}
  - title: Hugo
    description: The world's fastest static site generator.
    website: https://gohugo.io
    image: https://gohugo.io/favicon.ico
  - title: Pocket Hugo App
    description: Write posts directly in the Pocket Hugo app.
    website: https://leftn.com
    image: logo-app.webp
  - title: Pocket Hugo Theme
    description: The coolest theme around.
    website: https://theme.leftn.com
    image: pocket-hugo-theme-logo.webp
{{< /friendlinks >}}
Markdown Formatting in Hugo Pocket
Hugo The world's fastest static site generator.
Markdown Formatting in Hugo Pocket
Pocket Hugo App Write posts directly in the Pocket Hugo app.
Markdown Formatting in Hugo Pocket
Pocket Hugo Theme The coolest theme around.

Lists

Unordered List

- One item.
- Another item.
- A second item.
- A third item.
  • One item.
  • Another item.
  • A second item.
  • A third item.

Ordered List

1. First item.
2. Second item.
3. Third item.
  1. First item.
  2. Second item.
  3. Third item.

Task List

- [x] First task done
- [x] Second task done
- [ ] This task still needs doing
  • First task done
  • Second task done
  • This task still needs doing

Blockquotes, Callouts, and Notes

> A quotation in the article.
>
> It can span multiple lines.

A quotation in the article.

It can span multiple lines.

Use the note shortcode to highlight tips, warnings, or side comments.

{{< note type="info" title="Note heading (gray)" >}}
Put any text you want readers to notice inside the note.
{{< /note >}}

type="info"

Note heading (gray)
Put any text you want readers to notice inside the note.

type="tip"

Green
Put any text you want readers to notice inside the note.

type="warn"

Orange
Put any text you want readers to notice inside the note.

Code Blocks

Enclose any text in a pair of three-backtick fences:

```
theme = "pocket-hugo-theme"
defaultContentLanguage = "en"
mainSections = ["posts"]
```

It renders like this:

theme = "pocket-hugo-theme"
defaultContentLanguage = "en"
mainSections = ["posts"]

You can specify a language for syntax highlighting. For HTML, put html after the opening fence:

```html
<html>
	<body>
	<p>Text on an HTML page</p>
	</body>
</html>
```

<html>
	<body>
	<p>Text on an HTML page</p>
	</body>
</html>

To show an example with a three-backtick fence, enclose it in a four-backtick fence. Use a longer outer fence for longer inner fences.

Tables

| Element | What it does |
| --- | --- |
| Headings | Give the text a rhythm |
| Lists | Organize information |
| Blockquotes | Show which words are quoted |
| Images | Illustrate otherwise dry text |
Element What it does
Headings Give the text a rhythm
Lists Organize information
Blockquotes Show which words are quoted
Images Illustrate otherwise dry text

Wide tables scroll horizontally when they run out of room.

Heading Heading Heading Heading Heading Heading Heading Heading Heading Heading Heading Heading Heading
Item Item Item Item Item Item Item Item Item Item Item Item Item
Item Item Item Item Item Item Item Item Item Item Item Item Item
Item Item Item Item Item Item Item Item Item Item Item Item Item
Check the number of columns!
Keep the number of cells consistent across rows. The header and the separator row must have the same number of columns for Markdown to recognize the table.
Remember | — | — |
The | --- | --- | separator row beneath the header is required.

Collapsible Content

The fold shortcode shows a short line of text with an arrow. The extra content stays hidden until the reader expands it.

{{< fold "A short line of text with an arrow" >}}
This extra text appears only after you click the arrow. It can include formatting and elements such as `<details>`.
{{< /fold >}}
A short line of text with an arrow
This extra text appears only after you click the arrow. It can include formatting and elements such as <details>.

Badges

Badges are simple labels for indicating status or marking content.

{{< badge "Stable" >}}
{{< badge text="Optional" type="info" >}}
{{< badge text="Experimental" type="warn" >}}

Stable Optional Experimental — badges can sit on the same line.

Default type — Stable

type="info" — Optional

type="warn" — Experimental

Buttons

Use the button shortcode to add a clickable action within the text.

{{< button href="https://pavel.su/" label="Open the homepage" >}}
{{< button href="https://ya.ru" label="Open Yandex" style="ghost" >}}

Open the homepage Open Yandex

Images

![Image alt text](sample.jpeg)

Image alt text

For an image in the same folder as the article, use the filename. For an image in a subfolder, include the folder name.

To create an image gallery, use a separate gallery implementation.

Video and Audio

Embed local or external audio and video:

{{< video src="https://pavel.su/media/demo.mp4" title="Local HTML5 video" >}}A text description of the video.{{< /video >}}
{{< audio src="https://pavel.su/media/demo.mp3" title="Audio clip" >}}A text description of the local audio clip.{{< /audio >}}
{{< youtube id="rdwz7QiG0lk" >}}An embedded YouTube video styled to match the theme.{{< /youtube >}}
{{< bilibili bvid="BV1xx411c7mu" >}}The same kind of embed for Bilibili.{{< /bilibili >}}
A text description of the video.
Local HTML5 audio
A text description of the local audio clip.
An embedded YouTube video styled to match the theme.
The same kind of embed for Bilibili.

Timeline

Use the timeline shortcode to show a sequence of events.

{{< timeline >}}
{{< timeline-item date="2026-01" title="Planning" >}}Making plans for a bright future.{{< /timeline-item >}}
{{< timeline-item date="2026-08" title="Construction" >}}Building that bright future.{{< /timeline-item >}}
{{< timeline-item date="2026-02" title="Finishing touches" >}}Making that bright future look good.{{< /timeline-item >}}
{{< /timeline >}}
2026-01
Planning
Making plans for a bright future.
2026-08
Construction
Building that bright future.
2026-02
Finishing touches
Making that bright future look good.
  • Events appear in the order you write them. The dates are labels.
  • You can place independent timeline blocks anywhere in the article.

Columns

Use the columns shortcode for side-by-side comparisons and similar layouts. You can add several columns.

{{< columns >}}
{{< column >}}
### Left column heading

- Quick comparisons
- Summaries
- Before and after
{{< /column >}}
{{< column >}}
### Right column heading

- Brief notes
- Lists
- Longer content fits here too
{{< /column >}}
{{< /columns >}}

Left column heading

  • Quick comparisons
  • Summaries
  • Before and after

Right column heading

  • Brief notes
  • Lists
  • Longer content fits here too

Here’s how three columns look. Each column appears as a separate card.

{{< columns >}}
{{< column >}}
### Left column heading

- Quick comparisons
- Summaries
- Before and after
{{< /column >}}
{{< column >}}
### Middle column heading

- Compare left and right
- A middle option
- Pricing plans sometimes use this layout
{{< /column >}}
{{< column >}}
### Right column heading

- Brief notes
- Lists
- Longer content fits here too
{{< /column >}}
{{< /columns >}}

Left column heading

  • Quick comparisons
  • Summaries
  • Before and after

Middle column heading

  • Compare left and right
  • A middle option
  • Pricing plans sometimes use this layout

Right column heading

  • Brief notes
  • Lists
  • Longer content fits here too
]]>