Markdown 样式指南

本文为你演示在 Astro 中编写内容时常用的 Markdown 基础语法。

标题

以下展示支持的二级标题和三级标题样式。

二级标题

三级标题

四级标题

段落

（本段为无实际含义的占位文本）虚幻的言语交织，无谓的思绪翻涌。纷繁的念头来去交错，喜乐与烦忧相伴相生，种种心绪萦绕不散，繁杂琐事纠缠不休，人世百态在此一一呈现。人们追名逐利，被纷繁杂念左右，终日不得安宁。众生皆被俗世烦扰，心绪难平，四处奔波逃避。种种杂念扰人心神，思绪纷乱交错，徒增无端烦恼，日复一日深陷其中。

思绪万千，杂念丛生，是非对错难以分辨，理智也随之模糊不清，虚妄与杂念交织缠绕。

图片

语法

![替代文本](./图片完整路径/相对路径)

效果展示

引用块

引用块用于引用其他来源的内容，可搭配脚注或引用标注，也可在引用内添加注释、缩写等行内内容。

无来源标注的引用

语法

> 这是一段引用文本。
> **注意**：你可以在引用块内使用 _Markdown 语法_。

效果展示

这是一段引用文本。注意：你可以在引用块内使用 Markdown 语法。

带来源标注的引用

语法

> 不要通过共享内存来通信，而要通过通信来实现内存共享。<br>
> — <cite>罗布·派克[^1]</cite>

效果展示

不要通过共享内存来通信，而要通过通信来实现内存共享。
— 罗布·派克[^1]

[^1]：以上引言节选自罗布·派克在 2015 年 11 月 18 日 Gopherfest 大会上的演讲。

表格

语法

| 斜体 | 粗体 | 行内代码 |
| ---- | ---- | -------- |
| _斜体文本_ | **粗体文本** | `代码内容` |

效果展示

斜体	粗体	行内代码
斜体文本	粗体文本	`代码内容`

代码块

语法

另起一行输入三个反引号 ``` 即可创建代码块，代码编写完成后，同样另起一行用三个反引号结束。若需要开启对应编程语言的语法高亮，可在开头三个反引号后标注语言名称，例如 html、javascript、css、markdown、typescript、txt、bash 等。

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>HTML5 示例文档</title>
  </head>
  <body>
    <p>测试内容</p>
  </body>
</html>
```

效果展示

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>HTML5 示例文档</title>
  </head>
  <body>
    <p>测试内容</p>
  </body>
</html>

.container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: 4px;
  background: #fafafa;
}

const greeting = (name) => {
  console.log(`你好，${name}！`);
};

greeting('世界');

---
import Layout from '../layouts/Layout.astro';
const title = 'Hello Astro';
---
<Layout title={title}>
  <h1>{title}</h1>
</Layout>

列表类型

有序列表

语法

1. 第一项
2. 第二项
3. 第三项

效果展示

第一项
第二项
第三项

无序列表

语法

- 列表项
- 另一项
- 又一项

效果展示

列表项
另一项
又一项

嵌套列表

语法

- 水果
  - 苹果
  - 橙子
  - 香蕉
- 乳制品
  - 牛奶
  - 奶酪

效果展示

水果
- 苹果
- 橙子
- 香蕉
乳制品
- 牛奶
- 奶酪

其他元素 — 缩写、下标、上标、按键、高亮

语法

<abbr title="图形交换格式">GIF</abbr> 是一种位图图像格式。

H<sub>2</sub>O

X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

按下 <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> 结束会话。

大多数<mark>蝾螈</mark>为夜行生物，以昆虫、蠕虫及其他小型生物为食。

效果展示

GIF 是一种位图图像格式。

H₂O

Xⁿ + Yⁿ = Zⁿ

按下 CTRL + ALT + Delete 结束会话。

大多数蝾螈为夜行生物，以昆虫、蠕虫及其他小型生物为食。