Shiroi Markdown 功能测试
这是一份全面测试 Shiroi 博客系统支持的所有 Markdown 语法功能的文档。
目录
基础 Markdown 语法
标题层级
一级标题 H1
二级标题 H2
三级标题 H3
四级标题 H4
五级标题 H5
六级标题 H6
文本样式
这是一段普通文本。
这是粗体文本
这是斜体文本
这是粗斜体文本
这是删除线文本
链接与图片
这是一张图片
分隔线
引用
这是一段引用文本。
引用可以包含多个段落。
— 引用来源
扩展文本格式
标记高亮 (Mark)
这是 高亮文本，用于强调重要内容。
插入文本 (Insert)
这是 新插入的内容。
遮挡文本 (Spoiler)
遮挡 文本。
行内代码
使用 console.log() 输出调试信息。
列表与任务
无序列表
- 第一项
- 第二项
- 子项 2.1
- 子项 2.2
- 嵌套子项 2.2.1
- 第三项
有序列表
- 第一步
- 第二步
- 子步骤 2.1
- 子步骤 2.2
- 第三步
GFM 任务列表
- 待完成的任务
- 已完成的任务
- 另一个已完成的任务
- 正在进行的任务
表格
基础表格
| 表头 1 | 表头 2 | 表头 3 |
|---|---|---|
| 单元格 1 | 单元格 2 | 单元格 3 |
| 单元格 4 | 单元格 5 | 单元格 6 |
对齐方式
| 左对齐 | 居中对齐 | 右对齐 |
|---|---|---|
| 内容 A | 内容 B | 内容 C |
| 数据 1 | 数据 2 | 数据 3 |
复杂表格示例
| 表达内容 | 示例 | 说明 |
|---|---|---|
| 表示文件 | options.txt | 文本文件 |
| 表示变量 | <版本名> | 占位符 |
| 必须删除 | libraries *** | 带星号标记 |
数学公式 (KaTeX)
行内公式
这是一个行内公式：$ c = \pm\sqrt{a^2 + b^2} $
爱因斯坦质能方程：$E = mc^2$
多项式：$P(x) = anx^n+a{n-1}x^{n-1} + \dots + a1x + a0$
块级公式
代码块
JavaScript 代码
function greet(name) {
console.log(`Hello, ${name}!`)
return `Welcome to Shiroi`
}
greet('World')
TypeScript 代码
interface User {
id: number
name: string
email: string
}
const createUser = (user: User): void => {
console.log(`Creating user: ${user.name}`)
}
Python 代码
def fibonacci(n):
if n <= 1:
return n
return fibonacci(n-1) + fibonacci(n-2)
print(fibonacci(10))
Shell 脚本
#!/bin/bash
echo "Starting Shiroi..."
pnpm install
pnpm dev
Mermaid 流程图
Mermaid 时序图
容器与布局
Banner 提示横幅
Gallery 图片画廊
Image Caption
Grid 网格布局
网格项 1
这是第一个网格项的内容。
网格项 2
这是第二个网格项的内容。
网格项 3
这是第三个网格项的内容。
图片网格
Masonry 瀑布流布局
富链接
Shiroi 支持自动识别并渲染多种平台的链接。
GitHub 仓库
GitHub Commit
GitHub Pull Request
GitHub Gist
https://gist.github.com/Innei/94b3e8f078d29e1820813a24a3d8b04e
Twitter/X
YouTube
CodeSandbox
普通链接
https://trpc.io/docs/client/react/useInfiniteQuery
提及与社交
GitHub 用户提及
Twitter 用户提及
Telegram 用户提及
自动显示名称
提示框 (Alerts)
NOTE
Note这是一个提示信息，用于告知用户需要了解的有用信息。
TIP
Tip这是一个技巧提示，帮助用户更好地完成任务。
IMPORTANT
Important这是重要信息，用户需要特别注意以达成目标。
WARNING
Warning这是警告信息，需要用户立即关注以避免问题。
CAUTION
Caution这是注意事项，提醒用户某些操作可能带来的风险或负面结果。
定义列表
基础定义
Term 1 : 这是 Term 1 的定义。可以包含多行内容。
Term 2 : 这是 Term 2 的第一个定义。 : 这是 Term 2 的第二个定义。
带格式的定义
HTML : Hyper Text Markup Language : 用于创建网页的标准标记语言
CSS : Cascading Style Sheets : 用于描述网页样式的样式表语言
紧凑样式
Term 1 ~ Definition 1
Term 2 ~ Definition 2a ~ Definition 2b
脚注
这是一段包含脚注的文本[^1]。你可以在文中任意位置添加脚注引用[^2]。
脚注会自动在文档末尾显示。
多媒体
视频
可以直接使用 <video> 标签或视频链接。
LinkCard 组件
高级功能
缩写
这是 HTML 的示例，HTML 会被自动标记为缩写。
*Text Markup Language
详情折叠
Tabs 标签页
这是第一个标签页的内容。
Excalidraw 手绘图
React 远程组件渲染
综合测试
这一节综合测试多种功能的混合使用。
嵌套功能测试
Tip在引用中使用 高亮 和
遮挡文本。公式：$E = mc^2$
代码：
const x = 10
列表中的复杂内容
- 第一项：包含
代码和 斜体- 子项 1：高亮文本
- 子项 2：链接文本
- 第二项：数学公式
第三项：
// 列表中的代码块 console.log('Hello from list')
表格中的格式
| 功能 | 语法 | 示例 |
|---|---|---|
| 粗体 | **text** | 粗体 |
| 斜体 | *text* | 斜体 |
| 代码 | `code` | code |
| 高亮 | ==text== | 高亮 |
| 公式 | $formula$ |
测试总结
本文档涵盖了 Shiroi 支持的所有 Markdown 特殊语法，包括：
✅ 基础语法：标题、段落、列表、链接、图片、表格、引用
✅ 扩展文本：高亮 (==)、插入 (++)、遮挡 (||)
✅ 任务列表：GFM Tasks
✅ 数学公式：KaTeX 行内与块级
✅ 代码高亮：Shiki 支持多语言
✅ 容器布局：Banner、Gallery、Grid、Masonry
✅ 富链接：GitHub、Twitter、YouTube 等自动识别
✅ 社交提及：GH、TW、TG 用户提及
✅ 提示框：GitHub Alerts (NOTE/TIP/WARNING 等)
✅ 定义列表：术语定义
✅ 脚注：引用注释
✅ 高级功能：Tabs、Excalidraw、远程组件
最后更新：2026年2月17日
项目：Shiroi (白い)
文档版本：1.0.0