Markdown 样式完整测试

这是一篇专门用来检查 Markdown 样式的测试文章。它会覆盖博客里最常见的排版元素：标题、段落、链接、强调、列表、引用、表格、代码块、分割线以及一些边界情况。

如果你正在调主题，可以从头到尾扫一遍这篇文章：先看整体阅读节奏，再看每个元素之间的间距是否自然，最后检查深色模式、移动端和代码块复制按钮有没有异常。

二级标题：段落与基础文字

普通段落应该保持舒服的行高。中文文章的阅读节奏通常比英文更依赖留白，所以段落之间的距离不能太挤，也不能散到像一张没有收拢的纸。

这是一段稍长的文字，用来测试多行换行时的视觉效果。Mistwood 的气质偏安静、轻雾、低对比，因此正文颜色不应该太黑，背景也不应该太白。文字需要像落在纸上一样稳定，但不要有刺眼的重量。

你也可以检查这些行内样式：加粗文字、斜体文字、~~删除线文字~~、inline code，以及一个普通链接：Astro 官方网站。

三级标题：更细一级的小节

三级标题一般出现在文章内部的小主题里。它应该比正文明显，但又不能抢过二级标题。

这里有一个很长的英文片段，用来观察中英文混排时的节奏：The quick brown fox jumps over the lazy dog, and a quiet blog theme should still keep the paragraph calm, balanced, and readable across different screen sizes.

列表测试

无序列表适合记录松散的想法：

主题色是否在浅色和深色模式下都柔和。
列表项之间的间距是否清楚，但不显得松散。
中文、English words、code 混在一起时是否自然。
最后一项通常能暴露列表底部间距是否过大。

有序列表适合步骤说明：

打开文章详情页。
切换浅色和深色模式。
滚动页面，检查右侧目录和返回顶部按钮。
复制代码块，观察图标动画是否顺滑。

任务列表用于检查 GitHub Flavored Markdown 支持情况：

完成基础排版检查。
检查代码块和行号。
在真实文章里继续观察细节。

引用块

好的引用块应该像正文里的一次轻声停顿，而不是突然冒出来的警告框。

引用块内部也可能包含多段文字。

第一段引用文字。这里用于测试引用块内部的行高和左右留白。

第二段引用文字。它应该和第一段保持清晰的段落关系，同时整体仍然像一个完整的引用区域。

代码测试

行内代码适合展示变量名，例如 siteConfig.title、getReadingTime(post) 或者 pnpm new:post。

下面是一个 TypeScript 代码块：

type PostMeta = {
  title: string;
  description?: string;
  pubDate: Date;
  tags: string[];
};

export function formatPostTitle(post: PostMeta) {
  const tagText = post.tags.length > 0 ? ` #${post.tags[0]}` : "";
  return `${post.title}${tagText}`;
}

再来一个 Astro 组件片段：

---
import BaseLayout from "@/layouts/BaseLayout.astro";

const title = "Mistwood";
---

<BaseLayout title={title}>
  <section class="py-16">
    <h1>{title}</h1>
    <p>一片安静的雾林。</p>
  </section>
</BaseLayout>

以及一个较短的 Shell 示例：

corepack pnpm install
corepack pnpm dev

表格测试

表格常常是 Markdown 主题里最容易露馅的地方，尤其是在移动端和深色模式下。

项目	浅色模式	深色模式	备注
正文颜色	柔和清晰	不刺眼	避免纯黑纯白
边框颜色	低对比	更低对比	只负责分隔
代码背景	稍微浮起	轻微提亮	不要像广告牌
链接颜色	可识别	可点击	hover 后更明显

嵌套内容

下面是一组嵌套列表，用来检查缩进和层级：

第一层列表项
- 第二层列表项，包含一些说明文字。
- 第二层列表项，包含 inline code。
回到第一层列表项
1. 第二层有序列表。
2. 继续第二层有序列表。

分割线

分割线应该是一次轻微的章节切换。

分割线下面的段落不应该离得太近，也不应该像换了一篇文章。

图片占位

下面这个图片引用故意使用远程占位图，用来检查图片、圆角和段落间距。如果你暂时不想加载远程图片，也可以只看它对布局的影响。

Mistwood placeholder

图片下面的文字应该自然回到正文节奏里。如果图片加载失败，替代文本也不应该破坏页面布局。

边界情况

这是一段很长很长的连续英文，用来观察代码之外的长单词是否会撑破布局：mistwoodthemevisualregressionmarkdownlayoutoverflowcheckwithoutspacesandwithaveryveryverylongtoken。

这是一个很长的链接文本：这是一条很长很长的链接文字，用来测试换行、下划线、hover 状态以及在移动端是否会撑破页面。

最后再放一段收尾文字。整体上，这篇文章不是为了表达观点，而是为了让主题里每一个细节都出来见见光：如果有哪里看起来别扭，它通常会在这里露出来。