渲染功能测试

这是一个用于测试 Everlasting Pages 内容渲染能力的页面。

如果以后升级 Astro、Astro Pure、Shiki、KaTeX，或者修改全局 CSS，可以重新打开本页，快速检查有没有出现渲染回归。

1. 基础 Markdown#

1.1 文本样式#

普通文本。

粗体文本

斜体文本

粗斜体文本

~~删除线文本~~

这是 inline code 行内代码。

这是一个内部链接。

这是一个外部链接 ↗。

1.2 引用#

这是一段普通 Markdown 引用。

引用中可以包含粗体、代码 和其他 Markdown 内容。

1.3 无序列表#

Java
Python
C++
- STL
- Templates

1.4 有序列表#

创建项目
编写代码
编译项目
运行测试

1.5 嵌套列表#

CS61B
- Chapters
  - Java
  - Lists
  - Trees
- Labs
- Projects

1.6 表格#

功能	状态	说明
Markdown	✅	基础内容
MDX	✅	Astro 组件
KaTeX	✅	数学公式
Shiki	✅	代码高亮
Waline	✅	评论系统

2. 标题、锚点与 TOC#

这一部分用于测试右侧文章目录、点击跳转、Heading ID、标题锚点以及滚动高亮。

二级测试标题 A#

这里是 A 的内容。

二级测试标题 B#

这里是 B 的内容。

四级测试标题#

这里是更深一级的标题。

中文标题测试#

中文标题也应该正确生成 slug，并支持 TOC 跳转。

3. 数学公式 KaTeX#

3.1 行内公式#

二分查找的时间复杂度为 $O(\log n)$ 。

归并排序的时间复杂度为 $O(n\log n)$ 。

欧拉公式：

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

3.2 块级公式#

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

T(n)=2T\left(\frac{n}{2}\right)+O(n)

\begin{aligned} f(x) &= x^2 + 2x + 1 \\ &= (x+1)^2 \end{aligned}

4. Shiki 代码渲染#

4.1 基础代码块#

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}

java

4.2 文件标题#

HelloWorld.java

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}

java

4.3 Diff#

User.java

public class User {
    private String username;
    private String password; 
    private String passwordHash; 
}

java

4.4 单行高亮#

BinarySearch.java

public static int binarySearch(int[] a, int target) {
    int left = 0;
    int right = a.length - 1;

    while (left <= right) {
        int mid = left + (right - left) / 2; 

        if (a[mid] == target) {
            return mid;
        }

        if (a[mid] < target) {
            left = mid + 1;
        } else {
            right = mid - 1;
        }
    }

    return -1;
}

java

4.5 多行高亮#

Example.java

public class Example {
    public static void main(String[] args) {
        int x = 10; 
        int y = 20;
        int sum = x + y;

        System.out.println(sum);
    }
}

java

4.6 长代码自动折叠#

下面故意超过 15 行。

LongExample.java

public class LongExample {
    private int value;

    public LongExample(int value) {
        this.value = value;
    }

    public int getValue() {
        return value;
    }

    public void setValue(int value) {
        this.value = value;
    }

    public boolean isPositive() {
        return value > 0;
    }

    public boolean isNegative() {
        return value < 0;
    }

    public boolean isZero() {
        return value == 0;
    }

    public void reset() {
        this.value = 0;
    }

    public void increment() {
        this.value++;
    }

    public void decrement() {
        this.value--;
    }

    @Override
    public String toString() {
        return "LongExample{" +
                "value=" + value +
                '}';
    }
}

java

5. Card#

Everlasting Pages

Card 组件测试

2026

这里可以放普通文字、列表或者其他内容。

Astro
Markdown
MDX

6. Collapse#

点击展开内容

这是隐藏内容。

可以在这里放：

说明
答案
长代码
补充资料

System.out.println("Collapse works!");

java

这段文字始终显示在折叠标题上方。

带 before slot 的 Collapse

真正可折叠的内容在这里。

7. Aside#

Note#

Tip#

Caution#

Danger#

Aside 中嵌套代码#

8. Tabs#

java --version

powershell

Windows 使用 PowerShell。

java --version

bash

Linux 使用 Bash。

java --version

bash

macOS 也可以使用 Shell。

8.1 同步 Tabs#

下面两个 Tabs 使用相同的 syncKey。

切换其中一个后，另一个应该同步。

Windows
Linux

Windows 第一组内容。

Windows
Linux

Windows 第二组内容。

9. MDX Repl#

这是 MdxRepl 中的 Button

<MdxRepl width='80%'>
  <Button
    href='/'
    title='这是 MdxRepl 中的 Button'
    variant='ahead'
  />
</MdxRepl>

jsx

10. CardList#

10.1 普通 CardList#

CS 学习路线

Programming
- CS61A
- CS61B
Systems
- CSAPP

10.2 可折叠 CardList#

点击展开列表

第一项
第二项
第三项

11. Timeline#

2025
开始学习计算机科学
2026.01
学习数据结构与算法
2026.08
整理技术文档与个人博客
Future
Keep building.

12. Steps#

创建项目#

创建 Astro 项目并安装依赖。
编写内容#

使用 Markdown 或 MDX 编写文章。
本地测试#
```
npm run dev
```
powershell
构建项目#
```
npm run build
```
powershell
部署#

Push 到 GitHub 后自动部署。

13. Button#

普通按钮

Ahead

Back

Pill

自定义内容

14. Spoiler#

鼠标移动到下面内容：

答案是：42。

也可以隐藏一句话：

这是一个隐藏词语测试。

15. Label#

普通 Label

RSS

16. SVG Loader#

下面直接加载：

src/assets/icons/key.svg

17. Icon#

单个图标测试：

17.1 Astro Pure 全部 Icon#

点击按钮应该复制对应 Icon 名称，并弹出 Toast。

18. Quote#

下面会调用 site.config.ts 中配置的一言 API。

刷新页面后，理论上应该重新请求内容。

19. GitHub Card#

everlastingQAQ / blog

Waiting for api.github.com...

???

?????

正常情况下会自动获取：

GitHub 头像
Description
Stars
Forks
License
主要语言

20. Link Preview#

20.1 GitHub#

GitHub - everlastingQAQ/blog: My blog

My blog. Contribute to everlastingQAQ/blog development by creating an account on GitHub. (github.com)

20.2 Astro#

Astro

Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between. (astro.build)

21. QRCode#

下面二维码固定指向博客首页：

22. Toast#

点击下面按钮。

如果工作正常，页面上应该出现 Toast。

23. Medium Zoom#

点击下面图片测试图片放大。

24. 普通图片#

同一张图片，不添加 zoomable：

25. 原生 Details#

点击展开原生 details

这里不依赖额外 JavaScript。

System.out.println("Native details");

java

26. 超长文本与 URL#

用于检查 overflow。

https://example.com/this/is/a/very/very/very/very/very/very/very/very/very/very/long/path/that/should/not/break/the/layout ↗

行内代码：

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

27. HTML 元素#

Keyboard#

按下 Ctrl + C。

Mark#

这是一个高亮文本。

Sub / Sup#

H₂O

E = mc²

Abbreviation#

HTML

28. 分割线#

上面。

下面。

29. 综合嵌套渲染#

下面同时使用 Tabs、代码块和数学公式。

Java
Python

Main.java

public class Main {
    public static void main(String[] args) {
        System.out.println("Java");
    }
}

java

时间复杂度：

O(n \log n)

main.py

print("Python")

python

时间复杂度：

$O(n)$

30. Collapse + 代码#

查看完整 Java 示例

Main.java

public class Main {
    public static void main(String[] args) {
        User user = new User("Everlasting");
        System.out.println(user.getName());
    }
}

class User {
    private final String name;

    public User(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }
}

java

31. Spoiler + Inline Code#

问题：

Java 程序的默认入口方法叫什么？

答案：

public static void main(String[] args)

32. Button + Icon#

GitHub RSS

33. 响应式布局测试#

Card A

第一张响应式卡片

Card B

第二张响应式卡片

Card C

第三张响应式卡片

缩放浏览器窗口，检查：

手机
平板
桌面

三个尺寸下的布局。

34. 深色 / 浅色主题测试#

切换网站右上角主题按钮。

重点检查：

正文
链接
Inline Code
代码块
Aside
Card
Collapse
Tabs
GitHubCard
LinkPreview
QRCode
数学公式
图片
分割线

35. 渲染验收结论#

如果本页所有区域都工作正常，可以基本确认：

Markdown

↓

MDX

↓

Astro Content Collection

↓

remark / rehype

↓

KaTeX

↓

Shiki

↓

Astro Pure Components

↓

UnoCSS / Typography

↓

客户端交互

这一整条内容渲染链路工作正常。

36. 测试完成#

如果你能看到这一行，并且右侧 TOC 可以正常跳到这里：

Render Demo Passed.

渲染功能测试

1. 基础 Markdown#

1.1 文本样式#

1.2 引用#

1.3 无序列表#

1.4 有序列表#

1.5 嵌套列表#

1.6 表格#

2. 标题、锚点与 TOC#

二级测试标题 A#

二级测试标题 B#

四级测试标题#

中文标题测试#

3. 数学公式 KaTeX#

3.1 行内公式#

3.2 块级公式#

4. Shiki 代码渲染#

4.1 基础代码块#

4.2 文件标题#

4.3 Diff#

4.4 单行高亮#

4.5 多行高亮#

4.6 长代码自动折叠#

5. Card#

Everlasting Pages

6. Collapse#

7. Aside#

Note#

Tip#

Caution#

Danger#

Aside 中嵌套代码#

8. Tabs#

8.1 同步 Tabs#

9. MDX Repl#

10. CardList#

10.1 普通 CardList#

10.2 可折叠 CardList#

11. Timeline#

12. Steps#

创建项目#

编写内容#

本地测试#

构建项目#

部署#

13. Button#

14. Spoiler#

15. Label#

16. SVG Loader#

17. Icon#

17.1 Astro Pure 全部 Icon#

18. Quote#

19. GitHub Card#

20. Link Preview#

20.1 GitHub#

20.2 Astro#

21. QRCode#

22. Toast#

23. Medium Zoom#

24. 普通图片#

25. 原生 Details#

26. 超长文本与 URL#

27. HTML 元素#

Keyboard#

Mark#

Sub / Sup#

Abbreviation#

28. 分割线#

29. 综合嵌套渲染#

30. Collapse + 代码#

31. Spoiler + Inline Code#

32. Button + Icon#

33. 响应式布局测试#

Card A

Card B

Card C

34. 深色 / 浅色主题测试#

35. 渲染验收结论#

36. 测试完成#