Markdown 样式测试:所有格式预览
这篇文章包含本博客支持的所有 Markdown 格式。用来预览样式效果。
二级标题
正文段落。这是普通文字。这是加粗文字,这是斜体文字,这是行内代码。段落之间会自动留出间距。
三级标题
文字可以包含超链接,悬停和点击有对应样式。
列表
无序列表:
- 第一项
- 第二项,文字可能会很长很长很长很长很长很长很长很长很长很长很长很长很长很长来测试换行
- 第三项
- 嵌套子项 A
- 嵌套子项 B
- 第四项
有序列表:
- 第一步:做这个
- 第二步:做那个
- 第三步:检查结果
- 子步骤一
- 子步骤二
引用
设计不仅仅是它看起来像什么,设计是它如何工作。 —— Steve Jobs
多段落引用:
第一个引用段落。功能是地基,设计不能低于这个地基。
第二个引用段落。但真正让设计脱颖而出的,是融入其中的个性。
代码块
JavaScript:
hljs javascriptfunction fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(10)); // 55
TypeScript:
hljs typescriptinterface Post {
slug: string;
title: string;
date: string;
content: string;
}
export function getAllPosts(): Post[] {
return fs.readdirSync(postsDir)
.filter(f => f.endsWith(".mdx"))
.map(file => parsePost(file));
}
CSS:
hljs css:root {
--green: oklch(0.48 0.108 160);
--rust: oklch(0.50 0.145 32);
}
纯文本块(无语言标记):
text$ npm install $ npm run dev
表格
| 修饰键 | 符号 | 说明 |
|---|---|---|
| Command | ⌘ | 主力修饰键 |
| Option | ⌥ | 高级操作与菜单展开 |
| Control | ⌃ | Unix 风格快捷键 |
| Shift | ⇧ | 范围选择与反向操作 |
分隔线
上面的内容和下面的内容之间有一条分隔线。
分隔线之后的内容。
混合内容
这段文字包含加粗、斜体、代码和链接。下面是一张表格:
| 特性 | 支持 |
|---|---|
| 加粗 / 斜体 | 是 |
| 行内代码 | 是 |
| 代码块 | 是 |
| 表格 | 是 |
| 引用 | 是 |
| 列表 | 是 |
| 链接 | 是 |
这是一个引用,里面包含加粗和
行内代码。
长文段落
这一段用来测试长文字的排版效果。好的排版应该让读者忘记自己在阅读——字间距、行间距、段落间距都恰到好处,眼睛自然地从一个词滑到下一个词,从一行跳到下一行,没有阻碍。
中英文混排测试。This is an English sentence mixed with 中文内容。中英文之间的间距应该保持一致。English words like "typography" and "design" should flow naturally within Chinese paragraphs without breaking the rhythm of reading.
This is a pure English paragraph to test how the English text renders without any Chinese characters mixed in. It should have proper line height, letter spacing, and paragraph spacing consistent with the overall design language of the publication.