1
# 一级标题
2
## 二级标题
3
### 三级标题

1
*斜体文本* 或 _斜体文本_
2
**粗体文本** 或 __粗体文本__
3
***粗斜体*** 或 ___粗斜体___
4
~~删除线~~
5
`行内代码`

1
em-dash（破折号）：---
2
en-dash（短破折号）：--
3
省略号：...
4
转义字符：\*不加粗\* \[不成为链接\] \`纯文本\`

1
- 列表项 1
2
- 列表项 2
3
  - 嵌套项 2.1
4
  - 嵌套项 2.2
5
- 列表项 3

1
1. 第一项
2
2. 第二项
3
   1. 嵌套项 2.1
4
   2. 嵌套项 2.2
5
3. 第三项

1
术语
2
: 术语的定义说明
3

4
HTML
5
: 超文本标记语言
6
: 用于创建网页的标准标记语言

1
[链接文本](https://example.com)
2
[带标题的链接](https://example.com "悬停显示的标题")
3
<https://example.com>

1
![图片描述](图片路径)
2
![带标题的图片](图片路径 "图片标题")

1
> 这是一个引用块
2
> 可以跨越多行
3
>
4
> 引用块内也可以使用 **Markdown** 格式

1
这是一段包含脚注的文字[^1]。
2

3
[^1]: 这是脚注的内容，会显示在页面底部。

1
    // 缩进 4 个空格的代码
2
    function demo() {
3
      console.log('This is indented code')
4
    }

1
// 缩进 4 个空格的代码
2
function demo() {
3
  console.log('This is indented code')
4
}

1
```ansi frame="terminal"
2
ANSI colors:
3
- Regular: \u001b[31mRed\u001b[0m \u001b[32mGreen\u001b[0m  \u001b[33mYellow\u001b[0m
4
- Bold:    \u001b[1;31mBold Red\u001b[0m \u001b[1;32mBold Green\u001b[0m
5
- Underline: \u001b[4;35mUnderline Magenta\u001b[0m
6
```

1
```js title="src/main.js"
2
// 文件名会显示在代码块顶部
3
export function greet(name) {
4
  console.log(`Hello, ${name}`);
5
}
6
```

1
```bash frame="terminal" title="Terminal"
2
$ npm run build
3
Building project... ✓ Complete!
4
```

1
```sh frame="none"
2
echo "No decorative frame"
3
```

1
echo "No decorative frame"

1
```js {1,4,7-8}
2
// 第 1、4、7-8 行会被高亮标记
3
function example() {
4
  console.log('line 1')
5
  console.log('line 2')
6
  console.log('line 3')
7
  console.log('line 4')
8
  // ...
9
}
10
```

1
// 第 1、4、7-8 行会被高亮标记
2
function example() {
3
  console.log('line 1')
4
  console.log('line 2')
5
  console.log('line 3')
6
  console.log('line 4')
7
  // ...
8
}

1
```js title="line-markers.js" del={2} ins={3-4} {6}
2
function demo() {
3
  console.log('this line is marked as deleted')
4
  // This line and the next one are marked as inserted
5
  console.log('this is the second inserted line')
6

7
  return 'neutral line'
8
}
9
```

1
```jsx {"1. Step One":5-6} {"2. Step Two":8-10} {"3. Step Three":12-15}
2
// step-by-step.jsx
3
const Component = () => {
4
  // Step One: Setup
5
  const [count, setCount] = useState(0);
6

7
  // Step Two: Handler
8
  const increment = () => setCount(count + 1);
9

10
  // Step Three: Render
11
  return <button onClick={increment}>{count}</button>;
12
};
13
```

1
```diff lang="js"
2
 function greet() {
3
-  console.log('old')
4
+  console.log('new')
5
   return 'Hello'
6
 }
7
```

1
function greet() {
2
  console.log('old')
3
  console.log('new')
4
  return 'Hello'
5
}

1
```js del={1} ins={2}
2
- const deprecated = 'old API'
3
+ const modern = 'new API'
4
```

1
- const deprecated = 'old API'
2
+ const modern = 'new API'

1
```js "important"
2
function demo() {
3
  // This important line will be highlighted
4
  return 'important' + 'content';
5
}
6
```

1
function demo() {
2
  // This important line will be highlighted
3
  return 'important' + 'content';
4
}

1
```ts /ye[sp]/
2
console.log('The words yes and yep will be marked.')
3
```

1
console.log('The words yes and yep will be marked.')

1
```sh /\/home\/user/
2
echo "Test" > /home/user/file.txt
3
```

1
```js showLineNumbers
2
console.log('line 1')
3
console.log('line 2')
4
console.log('line 3')
5
```

1
console.log('line 1')
2
console.log('line 2')
3
console.log('line 3')

1
```js showLineNumbers startLineNumber=5
2
// 从第 5 行开始编号
3
console.log('line 5')
4
console.log('line 6')
5
```

5
// 从第 5 行开始编号
6
console.log('line 5')
7
console.log('line 6')

1
```js wrap
2
// 长字符串会在显示时自动换行
3
const longString = '这是一个非常长的字符串，用来说明自动换行功能。当启用自动换行时，超出容器宽度的内容会自动折叠到下一行。';
4
```

1
// 长字符串会在显示时自动换行
2
const longString = '这是一个非常长的字符串，用来说明自动换行功能。当启用自动换行时，超出容器宽度的内容会自动折叠到下一行。';

1
```js wrap=false
2
// 长字符串会超出容器并产生横向滚动条
3
const longString = '这是一个非常长的字符串。当禁用自动换行时，超出容器宽度的内容会保持在同一行，用户需要水平滚动才能看到完整内容。';
4
```

1
// 长字符串会超出容器并产生横向滚动条
2
const longString = '这是一个非常长的字符串。当禁用自动换行时，超出容器宽度的内容会保持在同一行，用户需要水平滚动才能看到完整内容。';

1
```ts collapse={1..10}
2
// 前 10 行可以折叠
3
import { defineConfig } from 'astro/config';
4
import tailwind from '@astrojs/tailwind';
5
import svelte from '@astrojs/svelte';
6
import expressiveCode from 'astro-expressive-code';
7

8
export default defineConfig({
9
  integrations: [
10
    tailwind(),
11
    svelte(),
12
    expressiveCode(),
13
  ],
14
  // 其他配置...
15
});
16
```

1
// 前 10 行可以折叠
2
import { defineConfig } from 'astro/config';
3
import tailwind from '@astrojs/tailwind';
4
import svelte from '@astrojs/svelte';
5
import expressiveCode from 'astro-expressive-code';
6

7
export default defineConfig({
8
  integrations: [
9
    tailwind(),
10
    svelte(),
11
    expressiveCode(),
12
  ],
13
  // 其他配置...
14
});

1
```js collapse={6..15}
2
function processData(items) {
3
  const results = [];
4

5
  // 核心逻辑
6
  items.forEach(item => {
7
    // 这些行可以被折叠
8
    const processed = item
9
      .trim()
10
      .toLowerCase()
11
      .split('-')
12
      .map(part => part.charAt(0).toUpperCase() + part.slice(1))
13
      .join('');
14

15
    results.push(processed);
16
  });
17

18
  return results;
19
}
20
```

1
function processData(items) {
2
  const results = [];
3

4
  // 核心逻辑
5
  items.forEach(item => {
6
    // 这些行可以被折叠
7
    const processed = item
8
      .trim()
9
      .toLowerCase()
10
      .split('-')
11
      .map(part => part.charAt(0).toUpperCase() + part.slice(1))
12
      .join('');
13

14
    results.push(processed);
15
  });
16

17
  return results;
18
}

1
行内公式示例：$E = mc^2$，这是爱因斯坦的质能方程。

1
$$
2
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
3
$$

1
:::note
2
这是一个普通提示框，用于强调信息。
3
:::
4

5
:::tip
6
这是一个技巧提示框，提供有用的建议。
7
:::
8

9
:::important
10
这是一个重要提示框，包含关键信息。
11
:::
12

13
:::warning
14
这是一个警告提示框，提醒注意潜在风险。
15
:::
16

17
:::caution
18
这是一个注意提示框，说明可能的负面后果。
19
:::

1
:::note[📌 我的自定义标题]
2
可以为提示框设置自定义标题。
3
:::

1
> [!NOTE]
2
> GitHub 风格的提示框语法也支持。
3

4
> [!TIP]
5
> 使用 [!TIP]、[!IMPORTANT]、[!WARNING]、[!CAUTION] 等标记。

1
The content :spoiler[is hidden]!
2

3
查看隐藏内容：:spoiler[这是被隐藏的文本 **支持格式化**]!

1
::github{repo="saicaca/fuwari"}

1
<iframe width="100%" height="468"
2
  src="https://www.youtube.com/embed/VIDEO_ID"
3
  title="YouTube video player"
4
  frameborder="0"
5
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
6
  allowfullscreen>
7
</iframe>

1
<iframe width="100%" height="468"
2
  src="//player.bilibili.com/player.html?bvid=BV_ID&p=1"
3
  scrolling="no"
4
  border="0"
5
  frameborder="no"
6
  framespacing="0"
7
  allowfullscreen="true">
8
</iframe>