Hello World: Markdown语法测试

欢迎来到我的个人博客！这是一篇排版测试文章。

1. 基础排版

加粗，斜体，删除线，下划线。

你可以轻松插入外部链接或本地/网络图片：

2. 列表与表格

无序列表与嵌套：

• 一级项目
  • 二级项目 A
    • 三级项目
  • 二级项目 B
• 另一个一级项目

有序列表与嵌套：

1. 第一步：安装依赖
   • npm install astro
   • npm install tailwindcss
2. 第二步：配置项目
   1. 创建 astro.config.mjs
   2. 配置 Tailwind 插件
3. 第三步：启动开发服务器
   • 运行 npm run dev
   • 访问 http://localhost:4321

框架	模式	客户端 JS
Astro	SSG / SSR	极少 (Islands)
Next.js	SSR / SSG	较多

3. 公式与代码

质能公式：$E=mc^2$。

$$f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi$$

支持行内代码 npm init astro 和多行代码块：

console.log('Hello, Markdown!');

4. 引用与任务

“Less is more.” —— 这是一个引用。

• 配置基础环境
• 完成博客搭建

5. 脚注与分割线

脚注：

MDX 是 Markdown 的扩展¹，它允许在文档中直接嵌入 JSX 组件²。脚注在 MDX 环境下同样能够正确渲染。

水平分割线：

---

分割线常用于在视觉上分隔不同的内容区块。

---

6. Mermaid 图表

支持在 Markdown 中直接编写 Mermaid 语法，实时渲染为图表。

甘特图：

gantt
    title 博客开发计划
    dateFormat  YYYY-MM-DD
    section 前端
    搭建 Astro 框架       :done, a1, 2026-05-01, 3d
    配置 Tailwind 主题    :done, a2, after a1, 2d
    集成 MDX 支持         :done, a3, after a2, 2d
    section 内容
    编写首篇文章          :done, b1, 2026-05-04, 1d
    添加 Mermaid 图表     :active, b2, 2026-05-05, 2d

流程图：

flowchart TD
    A[开始] --> B{判断}
    B -->|条件1| C[处理1]
    B -->|条件2| D[处理2]
    C --> E[结束]
    D --> E

时序图：

sequenceDiagram
    participant U as 用户
    participant B as 浏览器
    participant S as 服务器
    U->>B: 输入网址
    B->>S: HTTP 请求
    S-->>B: 返回 HTML
    B-->>U: 渲染页面

类图：

classDiagram
    class Animal {
        +String name
        +makeSound()
    }
    class Dog {
        +fetch()
    }
    class Cat {
        +climb()
    }
    Animal <|-- Dog
    Animal <|-- Cat

Footnotes

1. MDX 官方文档 ↩

2. JSX 介绍 ↩