Markdown 语法指南

---
title: '文章标题'
description: '文章摘要，会出现在列表和 SEO 描述中。'
date: 2026.05.02
updated: 2026.05.03
category: Engineering
tags: [astro, markdown]
lang: zh
cover: '../../../assets/blog-placeholder-about.jpg'
draft: false
---

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

第一段文字。

第二段文字。  
这一行会接在第二段内部换行。

---

**粗体**、_斜体_、***粗斜体***、~~删除线~~、`inline code`

[站内链接](/zh/posts/markdown-syntax-guide)
[外部链接](https://astro.build)

也支持自动链接：https://github.github.com/gfm

`console.log("Hello World"){:js}`

- 无序列表
- 第二项
  - 嵌套项目
  - 另一个嵌套项目

1. 有序列表
2. 第二步
3. 第三步

- [x] 已完成
- [ ] 未完成
- [!] 重要
- [?] 疑问
- [+] 新增
- [*] 高亮
- [i] 信息
- [-] 取消

> 写博客最好的时间是刚解决完问题的时候。  
> 第二好的时间是忘掉之前。

![博客占位图](../../../assets/blog-placeholder-about.jpg)

| 语法 | 用途 | 示例 |
| --- | --- | --- |
| `_text_` | 斜体 | _text_ |
| `**text**` | 粗体 | **text** |
| `` `code` `` | 行内代码 | `code` |

这里有一个脚注引用。[^note]

[^note]: 脚注在常规宽度显示在文末脚注区，宽屏显示为靠近引用位置的左侧边注。

<abbr title="Graphics Interchange Format">GIF</abbr>

H<sub>2</sub>O

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

Press <kbd>Ctrl</kbd> + <kbd>K</kbd>

Use <mark>highlight</mark> for emphasis.

```ts
const message: string = "Hello";
console.log(message);
```

const message: string = "Hello";
console.log(message);

```ts title="hello.ts"
export function hello(name: string) {
  return `Hello, ${name}`;
}
```

export function hello(name: string) {
  return `Hello, ${name}`;
}

```js lineNumbers
const value = 1;
console.log(value);
```

```js lineNumbers=8
function main() {
  return "line numbers start at 8";
}
```

const value = 1;
console.log(value);

function main() {
  return "line numbers start at 8";
}

```tsx
const framework = "Astro"; // [\!code highlight]

// [\!code word:static]
const benefit = "static output";

console.log("old"); // [\!code --]
console.log("new"); // [\!code ++]

return benefit; // [\!code focus]
```

const framework = "Astro";

const benefit = "static output";

console.log("old");
console.log("new");

return benefit;

```ts tab="pnpm"
pnpm add astro
```

```bash tab="npm"
npm install astro
```

```bash tab="yarn"
yarn add astro
```

## 标题二 [step]

这里是第一组步骤的主说明，可以放安装前置条件、目标或注意事项。

### 子标题一 [step]

子步骤可以继续写正文，用来展示更细的执行项。

### 子标题二 [step]

第二个子步骤会和上一个子步骤保持同级编号。

## 标题三 [step]

回到二级步骤后，编号会延续外层步骤。

## 1. 标题二

数字前缀写法适合从别的文档迁移过来，渲染后会移除标题里的数字。

### 1. 子标题一

子步骤的数字也会重新由渲染器生成。

### 2. 子标题二

你可以专注写结构，不需要手动维护最终的圆点样式。

## 2. 标题三

外层步骤会继续显示为第二步。

行内公式：$$c = \pm\sqrt{a^2 + b^2}$$

```math
\int_a^b f(x)\,dx
```

<Callout title="提示" type="tip">

这里可以继续写 **Markdown**，也可以放链接、列表、代码块或数学公式。

</Callout>

:::tip[带 `Markdown` 的标题]

这里会渲染成 callout。

:::

<Cards>
  <Card
    title="Astro"
    description="内容优先的静态站点框架"
    href="https://astro.build"
    icon="Rocket"
  >
    适合写博客、文档和作品集。
  </Card>
  <Card title="本站组件" description="无链接卡片" icon="BookOpen">
    也可以只作为内容分组使用。
  </Card>
</Cards>

import Button from '../../../components/Button.astro';

<Button link="/" text="回到首页" />

<CodeBlockTabs defaultValue="astro">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="astro" label="Astro" active />
    <CodeBlockTabsTrigger value="css" label="CSS" />
  </CodeBlockTabsList>

  <CodeBlockTab value="astro" active>
    ```astro
    ---
    const name = "Astro";
    ---

    <h2>{name}</h2>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="css">
    ```css
    h2 {
      color: currentColor;
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>