Markdown 元素演示

这一页把博客里常见的 Markdown 和 MDX 元素放在一起，方便对照默认样式。下面的句子都是占位，读的时候看排版就好。

标题

从这里开始看标题的层级。每一级下面都有一小段示例文字，方便比较字号、字重和段间距。

二级标题

二级标题通常拿来划分一篇文章的大节。这一段稍微长一点，用来看看正文在标题下面怎么铺开，行距和段距是否舒服。

三级标题

三级标题适合一节里面的小题目。示例文字保持短，这样滚动时能同时看见上下两级标题。

四级标题

四级已经比较少用。这里留一段短文字，确认它仍然看得出是标题，而不是变成了加粗的正文。

五级标题

五级标题更轻。如果一篇文章用到这里，多半是在罗列很细的条目。这段只是让你看见它的样子。

六级标题

六级是 Markdown 里最深的一级。示例文字到此为止，接下来可以回到页面顶部。

[回到顶部]

段落

这是第一段。普通段落之间应该有清楚的间距，读起来不用挤在一起。

这是第二段。单独放一段，是为了看两段挨着时的距离，以及中文在默认行宽下的换行。

这是第三段，稍微短一些。三段连在一起，就能判断文章正文的节奏是否合适。

[回到顶部]

引用

引用适合摘一句别人的话，或者把一段话从正文里抬出来。下面连续放了几段引用，中间夹着普通段落。

这是第一段引用。它应该有左边的竖线或缩进，和正文分开。

引用结束后，正文继续。这一小段用来确认引用不会把后面的段落样式带走。

这是第二段引用，比上一段更短。

短段落也可以紧跟在引用后面。

这是第三段引用。如果页面里连续出现好几段引用，间距要仍然分得清每一段。

引用区到这里结束。回到正文之后，字体和颜色应该恢复正常。

[回到顶部]

列表

有序列表

1. 龙眼
2. 荔枝
3. 这一条长一些，用来看列表项换行之后，第二行是否仍然对齐。 缩进的这一行仍然属于同一条，不应该变成新的一项。
4. 黑莓
5. 瓜
   • 哈密瓜
   • 蜜瓜
   • 西瓜
6. 神秘果
7. 桑葚

无序列表

• 橄榄
• 橙子
  • 血橙
  • 小柑橘
• 木瓜
• 这一条也写长一点，看看无序列表在窄屏上怎么折行，圆点是否还留在第一行旁边。
• 百香果

[回到顶部]

分隔线

分隔线上面是一段普通文字。它用来把两个话题轻轻切开，而不是另起一节标题。

分隔线下面又是一段普通文字。上下间距应该对称，横线本身不要太抢眼。

[回到顶部]

表格

表格用来并列几列信息。窄屏上它应该能横向滚动，而不是把整页撑破。

表格结束后再接一小段正文，确认后面的段落没有继承表格的样式。

[回到顶部]

代码

行内代码

句子中间可以夹一段 行内代码，用来标文件名、命令或字段。标签放进反引号里会原样显示，例如 <strong>一段被标签包住的文字</strong>。

高亮代码块

下面是一段 Go 示例。浅色和深色主题下，高亮都应该还在，代码可以横向滚动。

package main

import (
    "fmt"
    "net/http"
)

func handler(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "你好，我喜欢 %s！", r.URL.Path[1:])
}

func main() {
    http.HandleFunc("/", handler)
    http.ListenAndServe(":8080", nil)
}

代码块下面再接一段正文，确认字体已经回到文章的正文字体。

[回到顶部]

行内元素

这一段里同时有 加粗、普通文字，以及一个链接。再来一处 成片的加粗，中间夹着另一个链接，最后用 收尾的加粗 结束。这些样式叠在同一段里时，不该把行距撑乱。

这是图片下面的斜体说明。 说明结束后回到正体。句子里还可以再放一段 行内代码，以及一个斜体段落中的链接。宽图应该占满正文栏，又不要溢出页面。

较小的图片用来对比尺寸。这里还有嵌套样式：斜体里面可以有 加粗。 反过来也可以：加粗里面可以有 斜体。 两种嵌套都应该同时看得出来。

最后一段只放一个普通链接，确认链接颜色、下划线和悬停状态在正文里清楚。

[回到顶部]

MDX

---
publishDate: 2026-01-20T00:00:00Z
title: 'Markdown 元素演示'
---
import Logo from "~/components/Logo.astro";

## MDX

<Logo />

Astro 嵌入

YouTube

推文

Vimeo

[回到顶部]