Inline Formatting

You can check bold text, italic text, combined emphasis, inline code, and a standard link to Hugo .

You can also test superscript-like notation such as H2O, keyboard-style hints like Ctrl + K, and escaped characters such as *literal asterisks*.

Lists

Unordered List

• Cover-first cards should still feel calm on mobile.
• Metadata needs to stay readable at narrow widths.
• Spacing matters as much as typography.

Ordered List

1. Draft the post.
2. Add a cover image.
3. Review the mobile reading rhythm.

Task List

• Add front matter
• Add a local cover image
• Replace demo copy with production writing

Quote

Good article themes disappear while you read.

Great ones also make browsing pleasant before you click.

Code Blocks

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

const article = {
  title: "Markdown Rendering Showcase",
  cover: "cover.webp",
  mobileReady: true,
};

Table

Image

The local bundle image should appear both as the cover and as an inline asset:

Horizontal Rule

Final Notes

If this article looks balanced on both desktop and phone, the theme is usually in a strong place for real essays, changelogs, notes, and documentation pages.

What this feature is for

Use a title card when you want the article to look complete in lists and single pages, but you do not want to prepare a real image file for every post.

That is especially useful for:

• notes and short essays
• documentation pages
• multilingual pages that should share a consistent visual rhythm
• sections where text-first cards feel more natural than photo covers

Quick start

In front matter, the simplest form is just one letter:

coverCard: "a"

Rules:

• a to h: the 8 light presets
• A to H: the 8 dark presets
• any other value: falls back to an automatic random preset

If you set coverCard, the theme will use the generated title card and stop using image.

Hide the repeated list title

If you only want the title to appear inside the card on homepage, taxonomy, archive, and other list-style pages, add:

listTitle: false

That will hide the repeated title in list cards. On single pages, if the page is using a generated title card, it will also hide the separate title block there.

If you want to change this site-wide, use params.article.listTitle = false in hugo.toml. That site-level switch only affects generated gradient cards in list pages, not normal image covers.

Example front matter

title: "My Article"
date: 2026-02-09T08:30:00+08:00
slug: "my-article"
coverCard: "C"
listTitle: false

All 16 presets

The presets below follow the built-in order used by the theme.

When to use which preset

• a / A: warm and editorial, good for essays and personal writing
• b / B: softer and more friendly, useful for tutorials or documentation
• c / C: stronger contrast, good for product or release notes
• d / D: muted and calm, fits archive-like or reflective writing
• e / E: lively and fresh, useful for tools, workflow, and updates
• f / F: neutral and restrained, good for technical references
• g / G: clearer and more digital, useful for software and platform topics
• h / H: monochrome and minimal, good for terse notes or index pages

Default behavior

If the page does not define coverCard, the theme falls back to the site-level cover rules in hugo.toml.

That means a user can also do nothing at all and still get a generated title card by default. When the theme fallback is set to gradient mode, the card preset is assigned automatically.

That means you can combine both strategies:

• use a global fallback mode for ordinary posts
• set coverCard only on the pages where you want a specific preset

One practical recommendation

Start with the automatic fallback for the site, then manually assign letters only to pages that you want to feel more deliberate. That keeps authoring fast while still giving important pages a distinct look.

Default Setting

By default, Pocket Hugo theme enables comments on all pages. If you wish to disable comments on a specific page or post, please add comments: false to the frontmatter section of the corresponding Markdown file.

This theme uses Twikoo as its default comment system. To utilize Twikoo, you must deploy the necessary cloud functions in accordance with the official Twikoo documentation to ensure proper operation. Alternatively, you are free to configure your preferred comment solution, such as Utterances, Waline, Disqus, and others, according to your own preferences.

• Twikoo Docs

• Giscus Docs

• Utterances Docs

• Waline Docs

• Disqus Docs

To see every block below rendered as intended, enable the related switches in hugo.toml:

[params.extensions]
  mermaid = true
  katex = true

Syntax highlighting is included by default. For Mermaid and KaTeX, add a page-level list in the front matter of the article that actually needs them:

extensions:
  - mermaid
  - katex

Syntax Highlighting

Pocket Hugo includes a small syntax color layer by default, so normal highlighted code blocks do not need any extra page-level switch.

package main

import "fmt"

func main() {
    theme := "pocket-hugo-theme"
    enabled := []string{"syntax", "mermaid", "katex"}
    fmt.Println(theme, enabled)
}

.article-content pre {
  border-radius: 18px;
  overflow-x: auto;
}

Mermaid

When the mermaid extension is enabled, fenced code blocks with the mermaid language are converted into diagrams on the page.

flowchart LR
    A[Write Markdown] --> B[Enable extension]
    B --> C[Build site]
    C --> D[See rendered diagram]

KaTeX

When the katex extension is enabled, inline and block math can render directly inside the article.

Inline math: $E = mc^2$

Block math:

$$ \int_{0}^{1} x^2 , dx = \frac{1}{3} $$

$$ f(x) = \frac{1}{\sqrt{2\pi\sigma^2}} \exp\left(-\frac{(x-\mu)^2}{2\sigma^2}\right) $$

Mixed Content

The main goal of this post is to show that code, diagrams, and formulas can live together in one normal article layout without breaking the theme rhythm.

1. Syntax highlighting improves token contrast.
2. Mermaid turns fenced blocks into SVG diagrams.
3. KaTeX renders math without changing your writing flow too much.