功能验证
本文用于验证博客 Markdown 体验升级后的各项功能。
代码高亮测试
支持多种语言的代码高亮:
interface User {
id: string;
name: string;
email: string;
}
async function fetchUser(id: string): Promise<User> {
const response = await fetch(`/api/users/${id}`);
return response.json();
}
@Service
public class UserService {
@Autowired
private UserRepository userRepository;
public User findById(String id) {
return userRepository.findById(id).orElse(null);
}
}
表格测试
| 功能 | 状态 | 说明 |
|---|---|---|
| Shiki 双主题 | ✅ | github-light / github-dark |
| TOC 目录 | ✅ | 自动提取 h2-h4 |
| 阅读时间 | ✅ | 中英文混合计算 |
| 标题锚点 | ✅ | 悬停显示 # 链接 |
| XSS 防护 | ✅ | rehype-sanitize |
列表测试
有序列表:
- 安装依赖包
- 更新类型定义
- 重写 markdown 处理
- 创建 UI 组件
- 添加样式
- 页面集成
无序列表:
- cursor-pointer 必须添加
- focus:ring-2 焦点可见
- aria-label 必须提供
- transition-colors 200ms
引用测试
设计系统的核心价值在于一致性。
当所有组件遵循相同的规则时,用户体验会变得更加流畅。
混合内容测试
这是一段包含 加粗、斜体、内联代码 和 链接 的文本。
总结
所有功能均已验证,升级完成。