Markdown 渲染测试

Sun, 24 May 2026 00:00:00 GMT

import { Aside, Steps, Spoiler, Tabs, TabItem, Timeline, Collapse, CardList } from 'astro-pure/user'

主题特性展示：本页面涵盖 Astro Pure 主题支持的所有 Markdown 增强渲染功能。

一、基础排版

强调与行内元素

这是粗体，这是斜体，这是 ~~删除线~~，这是 行内代码。

这里有一个 Spoiler 行内组件——这是一个隐藏内容，点击展开

链接

内部链接，外部链接（自动追加 ↗ 标记）。

引用块

水满则溢，月盈则亏。

凡事有度，过犹不及。保持谦逊与敬畏，方能行稳致远。 — Yinary

二、代码高亮

TypeScript

interface Post {
  title: string
  description: string
  publishDate: Date
  tags: string[]
  draft?: boolean
}

async function getPosts(): Promise<Post[]> {
  const res = await fetch('/api/posts')
  return res.json()
}

Rust

fn main() {
    let greeting = "Hello, Yinary!";
    println!("{}", greeting);

    for i in 0..5 {
        println!("Count: {}", i);
    }
}

带标题和折叠的代码块（长代码会自动折叠）

// 这段代码被标记折叠，超过 10 行后自动折叠
const config = {
  site: 'https://yinary.top',
  title: 'Yinary',
  author: 'Hoyou',
  language: 'zh-CN',
  theme: 'Astro Pure',
  features: {
    search: true,
    rss: true,
    sitemap: true,
    toc: true,
    katex: true,
    lightbox: true,
    comment: false
  }
}

三、数学公式（KaTeX）

行内公式

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

块级公式

欧拉公式：

$$ e^{i\pi} + 1 = 0 $$

傅里叶变换：

$$ \mathcal{F}(f)(\omega) = \int_{-\infty}^{\infty} f(t) e^{-2\pi i \omega t} dt $$

二次方程求根公式：

$$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

贝叶斯定理：

$$ P(A|B) = \frac{P(B|A) \cdot P(A)}{P(B)} $$

四、表格

| 元素 | 颜色 | 代表角色 | 特性 | |-------|------|----------|------| | 风 | 青 | 温迪 | 扩散 | | 岩 | 黄 | 钟离 | 护盾 | | 雷 | 紫 | 雷电将军 | 充能 | | 草 | 绿 | 纳西妲 | 激化 | | 水 | 蓝 | 芙宁娜 | 增伤 | | 火 | 红 | 胡桃 | 蒸发 | | 冰 | 浅蓝 | 甘雨 | 冻结 |

五、列表

无序列表

前端技术
- Astro
- React
- Vue
后端技术
- Node.js
- Go
工具链
- Bun
- Vite

有序列表

安装依赖 bun install
启动开发 bun run dev
构建部署 bun run build

任务列表

[x] 配置 Astro Pure 主题
[x] 设置 GitHub Actions
[ ] 申请域名备案
[ ] 添加友链

六、Steps 步骤组件

使用 Bun 一键安装项目模板。

git clone https://github.com/cworld1/astro-theme-pure.git
cd astro-theme-pure && bun install

配置站点

编辑 src/site.config.ts，设置站点标题、作者、描述等信息。
编写文章

在 src/content/blog/ 下创建 Markdown 文件。
推送部署

Git push 到 GitHub，Actions 自动构建并部署到服务器。

七、Tabs 标签页

八、Aside 提示框

九、Timeline 时间线

十、Collapse 折叠

它复刻了教科书体风格，兼顾美观与可读性，非常适合个人博客使用。

当前本站正文即使用此字体渲染。

!= === -> => <= >= ++ || &&

本站代码块均使用 FiraCode 渲染。

十一、CardList 卡片列表

十二、图片与 Lightbox

点击下图可放大预览：

图片会自动启用 MediumZoom 灯箱效果，点击图片即可放大查看。

十三、分割线

上面的内容到此为止。

开始新的话题。

总结

Astro Pure 主题为 Markdown 提供了丰富的增强渲染：

| 功能 | 支持 | |------|------| | 基础 Markdown | ✅ | | 代码高亮 (Shiki) | ✅ | | 数学公式 (KaTeX) | ✅ | | 步骤组件 (Steps) | ✅ | | 标签页 (Tabs) | ✅ | | 提示框 (Aside) | ✅ | | 时间线 (Timeline) | ✅ | | 折叠面板 (Collapse) | ✅ | | 卡片列表 (CardList) | ✅ | | 剧透文本 (Spoiler) | ✅ | | 图片灯箱 (MediumZoom) | ✅ |

Hello World

Sat, 23 May 2026 00:00:00 GMT

水满则溢，月盈则亏。

这是 Yinary 的第一篇文章。愿你在这里找到共鸣。