Astro Pure 主题完整语法测试#

本文全面测试 Astro Theme Pure 支持的所有 Markdown、MDX 语法和组件功能。

1. 基础 Markdown 语法#

1.1 文本格式#

粗体文本 和 斜体文本 以及 粗斜体

删除线文本

行内代码

==高亮文本==

1.2 列表#

无序列表：

• 项目 1
• 项目 2
  • 子项目 2.1
  • 子项目 2.2
• 项目 3

有序列表：

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

任务列表：

• 已完成的任务
• 未完成的任务
• 待办事项

1.3 链接和图片#

访问 FXJ Wiki ↗

访问 Astro 官网 ↗

1.4 引用#

这是一个引用块

可以包含多行内容

— 冯相杰

1.5 分隔线#

2. 代码高亮和语法#

2.1 JavaScript 代码#

// JavaScript 代码示例
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10)); // 输出: 55

2.2 Python 代码#

# Python 代码示例
def quick_sort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quick_sort(left) + middle + quick_sort(right)

print(quick_sort([3, 6, 8, 10, 1, 2, 1]))

2.3 TypeScript 代码#

// TypeScript 代码示例
interface User {
  name: string;
  age: number;
  email?: string;
}

const user: User = {
  name: '冯相杰',
  age: 25,
  email: '[email protected]'
};

function greet(user: User): string {
  return `Hello, ${user.name}!`;
}

console.log(greet(user));

2.4 代码 Diff 对比#

// 代码修改对比示例
- function oldFunction() {
-   console.log('这是旧代码');
-   return 'old';
- }
+ function newFunction() {
+   console.log('这是新代码');
+   return 'new';
+ }

// 添加新功能
+ function addedFunction() {
+   return '新增的功能';
+ }

2.5 带行号的代码#

// 高亮第1行和第3-5行
function example() {
  const message = 'Hello World';
  console.log(message);
  return message;
}

2.6 代码块标题#

// 带标题的代码块
export function formatDate(date) {
  return new Intl.DateTimeFormat('zh-CN').format(date);
}

3. 表格#

4. 用户组件测试#

4.1 Button 按钮组件#

4.2 Card 卡片组件#

4.3 Collapse 折叠组件#

console.log('代码也可以放在折叠内容中');

4.4 Spoiler 剧透组件#

4.5 Label 标签组件#

4.6 Timeline 时间线组件#

4.7 Steps 步骤组件#

1. 第一步：准备环境

   安装 Node.js 和 npm

2. 第二步：创建项目

   npm create astro@latest -- --template cworld1/astro-theme-pure

   bash

3. 第三步：启动开发服务器

   npm run dev

   bash

4. 第四步：开始写作

   在 src/content/blog/ 目录下创建文章

4.8 Tabs 标签页组件#

// JavaScript 示例
const message = 'Hello from JavaScript!';
console.log(message);

# Python 示例
message = "Hello from Python!"
print(message)

// TypeScript 示例
const message: string = 'Hello from TypeScript!';
console.log(message);

4.9 Aside 提示框组件#

4.10 CardList 卡片列表组件#

5. LaTeX 数学公式#

5.1 行内公式#

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

勾股定理：$a^2 + b^2 = c^2$

5.2 块级公式#

二次方程求根公式：

6. 特殊语法#

6.1 脚注#

这是一个包含脚注的段落¹。

这是另一个脚注²。

6.2 键盘按键#

按下 Ctrl + C 复制文本。

按下 Ctrl + V 粘贴文本。

6.3 上标和下标#

H₂O 是水的化学式。

E=mc² 是质能方程。

7. 告示框#

:::note 这是一个提示框，用于显示重要信息。 :::

:::tip 这是一个技巧提示框。 :::

:::caution 这是一个警告框。 :::

:::danger 这是一个危险警告框。 :::

8. HTML 支持#

9. Emoji 支持#

🎉 🚀 💻 📝 ✨ 🔥 👍 ❤️ 🎨 🌟 💡 🔧 📚 🎯

10. 复杂组合示例#

10.1 嵌套组件#

10.2 代码和组件的组合#

// 完整的组件使用示例
import { Button, Card, Timeline } from 'astro-pure/user'

export function MyComponent() {
  return (
    <div>
      <Card heading="标题" subheading="副标题">
        <Timeline events={[
          { date: '2025-10-06', content: '事件内容' }
        ]} />
        <Button variant="ahead">按钮</Button>
      </Card>
    </div>
  )
}

// 简化版本
<Button>简单按钮</Button>

11. 总结#

Astro Theme Pure 支持：

✅ 基础功能#

1. 完整的 Markdown 语法
2. MDX 组件集成
3. LaTeX 数学公式（KaTeX）
4. 代码高亮（Shiki）
5. 代码 Diff 对比
6. 响应式设计
7. 暗黑模式
8. 搜索功能

✅ 用户组件#

1. Button - 按钮组件
2. Card - 卡片组件
3. Collapse - 折叠组件
4. Spoiler - 剧透组件
5. Label - 标签组件
6. Icon - 图标组件
7. Timeline - 时间线组件
8. Steps - 步骤组件
9. Tabs/TabItem - 标签页组件
10. Aside - 提示框组件（支持：note, tip, caution, danger）
11. CardList - 卡片列表组件

✅ 高级功能#

1. 代码行号高亮
2. 代码块标题
3. 脚注支持
4. 键盘按键显示
5. 上标下标
6. HTML 直接嵌入
7. Emoji 支持
8. 组件嵌套组合

这是一个功能强大且美观的博客主题！🎨