你好，世界 — 文章系统演示

演示本站 Markdown 文章系统支持的所有语法：标题、代码高亮、表格、任务列表、数学公式等。

---

简介

欢迎来到本站的第一篇文章！这篇文章用于演示本站 Markdown 渲染系统支持的所有主要语法。你可以把它当作一篇模板，复制并修改它来撰写你的下一篇文章。

本站使用 React + Vite 构建，并通过 react-markdown 生态来渲染 Markdown 内容。

标题结构

二级以下的标题会被自动收录到右侧目录（TOC）中

你可以点击目录快速跳转到对应章节。

代码高亮

JavaScript 示例

function greet(name) {
  const message = `Hello, ${name}!`
  console.log(message)
  return {
    success: true,
    message,
    timestamp: Date.now(),
  }
}

greet('世界')

JSON 示例

{
  "name": "my-index",
  "version": "0.1.0",
  "tags": ["react", "vite", "markdown"],
  "config": {
    "darkMode": true,
    "codeHighlight": "highlight.js"
  }
}

CSS 示例

.article {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem;
  line-height: 1.8;
}

表格

功能	语法	说明
粗体	text	像这样
斜体	text 或 _text_	像这样
删除线	~~text~~	~~像这样~~
行内代码	` code `	像这样
链接	<a href="url">text</a>	访问首页

任务列表

• [x] 实现文章加载模块
• [x] 实现列表页与搜索
• [x] 实现详情页与代码高亮
• [x] 实现数学公式渲染
• [ ] 实现评论系统（后续计划）
• [ ] 实现按日期归档视图

引用

「在任何足够先进的技术中，都无法区分它与魔法。」 — Arthur C. Clarke

列表

有序列表：

1. 创建 md 文件
2. 填写 frontmatter（title / date / category / tags / description）
3. 编写正文
4. 保存，刷新即可

无序列表：

• 文件放在 src/content/articles/
• slug 由文件名生成
• 日期建议使用 YYYY-MM-DD 格式

数学公式

行内公式

质能方程：$E = mc^2$。

欧拉恒等式：$e^{i\pi} + 1 = 0$，被誉为数学中最优美的公式。

块级公式

$ \sum_{i=1}^{n} i = \frac{n(n+1)}{2} $

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

$ \begin{pmatrix} a & b \\\\ c & d \end{pmatrix} \begin{pmatrix} x \\\\ y \end{pmatrix} = \begin{pmatrix} ax + by \\\\ cx + dy \end{pmatrix} $

图片

图片使用相对路径即可。在文章的同名子文件夹（hello-world/）下放置图片，在 md 中写相对路径，渲染时会自动解析。

• <img src="image-20260614045728008.png" alt="" loading="lazy" /> —— 直接写文件名
• <img src="hello-world/image-20260614045728008.png" alt="" loading="lazy" /> —— 写 slug/文件名
• <img src="https://example.com/img.png" alt="alt" loading="lazy" /> —— 外链图片（http / https 开头）

链接

• React 官方文档
• Vite 官方文档
• Markdown Guide

结语

如果你读到这里，说明本站的 Markdown 渲染系统已经正常工作。开始写作吧！