Markdown 元素演示

这一页把博客会渲染的 Markdown 和 MDX 元素集中在一起，用来检查标题、段落、列表、表格、代码、图片和嵌入在默认样式下的样子。下面的文字是示例，方便看中文排版，不是正式内容。

标题

标题用来建立层级。这一段跟在最高一级标题后面，看看标题和正文之间的间距、字号和颜色是否清楚。往下每一级标题都会更小一点，正文保持同一套行高。

二级标题

二级标题通常是文章的主要小节。这一段稍长一些，用来看多行中文在标题下方怎么折行，以及段与段之间的空白够不够。读起来应该轻松，不该挤在标题边上。

三级标题

三级标题适合小节里的再分点。这里放一段中等长度的文字，确认它不会比正文更抢眼，同时仍然能从段落里被认出来。

四级标题

四级标题已经接近正文的字号。这一段用来确认它仍然可辨，没有和后面的段落粘在一起。

五级标题

五级标题很少用到。保留它，是为了确认默认样式没有把它弄得难以阅读，或者和正文完全分不出来。

六级标题

六级是 Markdown 里最深的一级。这一段很短，只为了看这一级标题在页面上是否仍然站得住。

[返回顶部]

段落

第一段用来看正文的字号、行高和段间距。中文没有单词间的空格，所以行长和行高要比英文更注意，读长句时不应该觉得挤。

第二段接着第一段，用来看连续段落之间的空白。两段应该分开，但不要远到像两个不相干的区块。

第三段再短一些，用来看短段落会不会留下过大的空白，或者和前后段贴得太紧。

[返回顶部]

引用

引用前面通常有一段引入。下面这条引用应该有明显的左边线或缩进，和正文区分开。

这是一段引用。它用来展示引用块的字号、颜色和内边距。引用可以只有一句话，也可以长到换行。

引用结束后，正文继续。下面再放一条短引用和一条稍长的引用，看连续出现时会不会粘在一起。

短引用：一句就够。

接下来是正文，说明第三条引用前面仍有正常的段落间距。

稍长的引用用来看换行。报价、摘录和提示都可以用这种样式，重要的是它在浅色和深色模式下都读得清。

引用块之后回到普通段落，确认样式已经恢复，没有把后面的文字也变成引用。

[返回顶部]

列表

有序列表

1. 龙眼
2. 荔枝
3. 这一项长一些，用来看有序列表在换行后，第二行是否和文字对齐，而不是跑到序号下面。
4. 黑莓
5. 甜瓜
   • 哈密瓜
   • 蜜瓜
   • 西瓜
6. 神秘果
7. 桑葚

无序列表

• 橄榄
• 橙子
  • 血橙
  • 小柑橘
• 木瓜
• 这一项也长一些，用来看无序列表的项目符号和换行后的文字是否对齐。
• 百香果

[返回顶部]

分隔线

分隔线上面是一段普通文字，用来看线和正文之间的距离。

分隔线下面再接一段文字。线应该横贯内容宽度，不要贴住上下段落。

[返回顶部]

表格

表格用来展示表头、对齐方式和窄屏上的横向滚动。下面这张表有居中列和右对齐列。

表格后面的这段文字用来确认表格样式没有漏到后面的段落上。

[返回顶部]

代码

行内代码

这一句中间夹了 行内代码，用来看代码字体、背景和与周围中文的基线是否对齐。旁边还可以出现原始 HTML：<strong>加粗的 HTML</strong>，确认它按预期显示，而不是被当成普通文字吞掉。

高亮代码块

代码块下面是一段 Go 示例，用来看 Shiki 在浅色和深色模式下的高亮、行号或背景，以及代码超出宽度时是否能横向滚动。

package main

import (
    "fmt"
    "net/http"
)

func handler(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Hi there, I love %s!", r.URL.Path[1:])
}

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

代码块结束后，这段文字确认页面回到了正文样式。

[返回顶部]

行内元素

这一段混合了几种行内样式：加粗、链接、以及再次出现的 加粗短语。用来看它们和周围中文是否同一行高，链接是否有下划线或颜色，加粗是否过重。

这是一段斜体说明，后面接普通文字、行内代码，以及一个示例链接。斜体在中文里可能不明显，所以要单独看一下。

再一段混合样式：普通、斜体里的 加粗，以及 加粗里的 斜体。用来确认嵌套时两种样式都能留下来。

最后一段只有一个行内链接，看它会不会把整行的颜色带偏。

[返回顶部]

MDX

---
publishDate: 2026-01-20T00:00:00Z
title: 'Markdown elements demo post'
---
import Logo from "~/components/Logo.astro";

## MDX

<Logo />

Astro 嵌入

YouTube

推文

Vimeo

[返回顶部]