Markdown & Shortcode Demo

This post exists to verify the rendering pipeline. It exercises every common feature you’ll use in real articles.

Headings work as TOC anchors

This h2 should appear in the right-rail TOC.

Subheading

Lists, bold, italic, strikethrough, inline code, and links all render normally.

Tables

Code blocks

type Plan = "free" | "pro" | "premium";

function dailyLimit(plan: Plan): number {
  return plan === "free" ? 5 : Infinity;
}

# build the blog
hugo --minify

Blockquote

“Public profiles are public — viewing them anonymously is normal use of the open web.”

Images

A. Markdown 原生语法（外链）

B. figure shortcode（带 caption + alt）

C. 占位图（placehold.co）

D. 本地图片 - 页面同目录（page bundle）✅ 推荐

图片直接放在文章 .md 同级目录里，markdown 写相对文件名即可：

这篇文章本身就是 page bundle：content/posts/markdown-syntax-demo/{index.md, cover.png}。 配合自定义的 render-image.html hook，markdown 里 ![](cover.png) 自动解析为 /blog/posts/markdown-syntax-demo/cover.png。

E. 站点级图片 - static/ 目录

图片放在 hugo-blog/static/images/foo.png，markdown 写以 / 开头的绝对路径：

render hook 会自动给 / 开头的路径加 baseURL 前缀（这里 = /blog），生产环境也能正确加载。

YouTube 嵌入

Hugo 内建 youtube shortcode，传 video id 即可：

也支持参数（自动播放、起始时间、隐藏控件）：

其他常用嵌入

Hugo 还内建了 vimeo / twitter / instagram / gist 等 shortcode：

{{< vimeo id="146022717" >}}
{{< gist user="username" id="abc123" >}}
{{< instagram "BWNjjyYFxVx" >}}

Task list

• Markdown
• Frontmatter
• TOC
• Custom shortcode
• Search index

Math (if enabled)

Inline expression: E = mc²

Footnote

Hugo supports footnotes natively¹.