渲染测试

使用社交账号登录

稍候片刻，月出文自明。

渲染测试 - Teror的客栈

渲染测试

Shiroi Markdown 功能测试文档

这是一份全面测试 Shiroi 博客系统支持的所有 Markdown 语法功能的文档。

基础 Markdown 语法

标题层级

一级标题 H1

二级标题 H2

三级标题 H3

四级标题 H4

五级标题 H5

六级标题 H6

文本样式

这是一段普通文本。

这是粗体文本

这是斜体文本

这是粗斜体文本

~~这是删除线文本~~

链接与图片

这是一个链接

分隔线

引用

这是一段引用文本。
引用可以包含多个段落。
— 引用来源

扩展文本格式

标记高亮 (Mark)

这是高亮文本，用于强调重要内容。

插入文本 (Insert)

这是新插入的内容。

遮挡文本 (Spoiler)

遮挡文本。

行内代码

使用 console.log() 输出调试信息。

列表与任务

无序列表

第一项
第二项
- 子项 2.1
- 子项 2.2
  - 嵌套子项 2.2.1
第三项

有序列表

第一步
第二步
1. 子步骤 2.1
2. 子步骤 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$

块级公式

\frac{d}{dx}\int_{a}^{x} f(t)dt = f(x)

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

P\left(U,T\right)=100\left.\left(0.6\min\left(1,\frac{U-0.70}{0.90-0.70}\right)+0.4\min\left(1,\frac{T-4000}{14000-4000}\right)\right)\right.

代码块

JavaScript 代码

CodeBlock Loading...

TypeScript 代码

CodeBlock Loading...

Python 代码

CodeBlock Loading...

Shell 脚本

CodeBlock Loading...

Mermaid 流程图

CodeBlock Loading...

Mermaid 时序图

CodeBlock Loading...

容器与布局

Gallery 图片画廊

Grid 网格布局

网格项 1

这是第一个网格项的内容。

网格项 2

这是第二个网格项的内容。

网格项 3

这是第三个网格项的内容。

图片网格

Masonry 瀑布流布局

富链接

Shiroi 支持自动识别并渲染多种平台的链接。

Twitter/X

YouTube

CodeSandbox

普通链接

https://trpc.io/docs/client/react/useInfiniteQuery

TRPC 文档

提及与社交

GitHub 用户提及

Innei

Twitter 用户提及

pseudoyu

Telegram 用户提及

某个用户

自动显示名称

InneiInneiInnei

提示框 (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 手绘图

Whiteboard loading…

React 远程组件渲染

Component Loading...

综合测试

这一节综合测试多种功能的混合使用。

嵌套功能测试

Tip

在引用中使用高亮和遮挡文本。

公式：$E = mc^2$

代码：const x = 10

列表中的复杂内容

第一项：包含 代码 和斜体
- 子项 1：高亮文本
- 子项 2：链接文本
第二项：数学公式 $\sum_{i=1}^{n} i$
第三项：
CodeBlock Loading...

表格中的格式

功能	语法	示例
粗体	`text`	粗体
斜体	`text`	斜体
代码	`code`	`code`
高亮	`==text==`	高亮
公式	$formula$	$x^2$

测试总结

本文档涵盖了 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

1: 这是第一个脚注的内容。
返回1
2: 这是第二个脚注的内容，可以包含更多详细信息。
返回2

使用社交账号登录

Shiroi Markdown 功能测试文档

这是一份全面测试 Shiroi 博客系统支持的所有 Markdown 语法功能的文档。

基础 Markdown 语法

标题层级

一级标题 H1

二级标题 H2

三级标题 H3

四级标题 H4

五级标题 H5

六级标题 H6

文本样式

这是一段普通文本。

这是粗体文本

这是斜体文本

这是粗斜体文本

~~这是删除线文本~~

链接与图片

这是一个链接

分隔线

引用

这是一段引用文本。
引用可以包含多个段落。
— 引用来源

扩展文本格式

标记高亮 (Mark)

这是高亮文本，用于强调重要内容。

插入文本 (Insert)

这是新插入的内容。

遮挡文本 (Spoiler)

遮挡文本。

行内代码

使用 console.log() 输出调试信息。

列表与任务

无序列表

第一项
第二项
- 子项 2.1
- 子项 2.2
  - 嵌套子项 2.2.1
第三项

有序列表

第一步
第二步
1. 子步骤 2.1
2. 子步骤 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$

块级公式

\frac{d}{dx}\int_{a}^{x} f(t)dt = f(x)

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

P\left(U,T\right)=100\left.\left(0.6\min\left(1,\frac{U-0.70}{0.90-0.70}\right)+0.4\min\left(1,\frac{T-4000}{14000-4000}\right)\right)\right.

代码块

JavaScript 代码

function greet(name) {
  console.log(`Hello, ${name}!`)
  return `Welcome to Shiroi`
}

greet('World')

CodeBlock Loading...

TypeScript 代码

interface User {
  id: number
  name: string
  email: string
}

const createUser = (user: User): void => {
  console.log(`Creating user: ${user.name}`)
}

CodeBlock Loading...

Python 代码

PYTHON

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print(fibonacci(10))

CodeBlock Loading...

Shell 脚本

BASH

#!/bin/bash
echo "Starting Shiroi..."
pnpm install
pnpm dev

CodeBlock Loading...

Mermaid 流程图

CodeBlock Loading...

Mermaid 时序图

CodeBlock Loading...

容器与布局

Gallery 图片画廊

Grid 网格布局

网格项 1

这是第一个网格项的内容。

网格项 2

这是第二个网格项的内容。

网格项 3

这是第三个网格项的内容。

图片网格

Masonry 瀑布流布局

富链接

Shiroi 支持自动识别并渲染多种平台的链接。

GitHub 仓库

https://github.com/Innei/Shiro

GitHub Commit

https://github.com/Innei/Shiro/commit/6957e011439eb2d3cbf42bfb67ed81b07d4bcc2a

GitHub Pull Request

https://github.com/Innei/Shiro/pull/129

GitHub Gist

https://gist.github.com/Innei/94b3e8f078d29e1820813a24a3d8b04e

Twitter/X

YouTube

CodeSandbox

普通链接

https://trpc.io/docs/client/react/useInfiniteQuery

TRPC 文档

提及与社交

GitHub 用户提及

Innei

Twitter 用户提及

pseudoyu

Telegram 用户提及

某个用户

自动显示名称

InneiInneiInnei

提示框 (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 手绘图

Whiteboard loading…

React 远程组件渲染

Component Loading...

综合测试

这一节综合测试多种功能的混合使用。

嵌套功能测试

Tip

在引用中使用高亮和遮挡文本。

公式：$E = mc^2$

代码：const x = 10

列表中的复杂内容

第一项：包含 代码 和斜体
- 子项 1：高亮文本
- 子项 2：链接文本
第二项：数学公式 $\sum_{i=1}^{n} i$

第三项：

// 列表中的代码块
console.log('Hello from list')

CodeBlock Loading...

表格中的格式

功能	语法	示例
粗体	`text`	粗体
斜体	`text`	斜体
代码	`code`	`code`
高亮	`==text==`	高亮
公式	$formula$	$x^2$

测试总结

本文档涵盖了 Shiroi 支持的所有 Markdown 特殊语法，包括：

最后更新：2026年2月17日
项目：Shiroi (白い)
文档版本：1.0.0

1: 这是第一个脚注的内容。
返回1
2: 这是第二个脚注的内容，可以包含更多详细信息。
返回2

渲染测试

渲染测试

Shiroi Markdown 功能测试文档

目录

基础 Markdown 语法

标题层级

一级标题 H1

二级标题 H2

三级标题 H3

四级标题 H4

五级标题 H5

六级标题 H6

文本样式

链接与图片

分隔线

引用

扩展文本格式

标记高亮 (Mark)

插入文本 (Insert)

遮挡文本 (Spoiler)

行内代码

列表与任务

无序列表

有序列表

GFM 任务列表

表格

基础表格

对齐方式

复杂表格示例

数学公式 (KaTeX)

行内公式

块级公式

代码块

JavaScript 代码

TypeScript 代码

Python 代码

Shell 脚本

Mermaid 流程图

Mermaid 时序图

容器与布局

Banner 提示横幅

Gallery 图片画廊

Grid 网格布局

图片网格

Masonry 瀑布流布局

富链接

GitHub 仓库

GitHub Commit

GitHub Pull Request

GitHub Gist

Twitter/X

YouTube

CodeSandbox

普通链接

提及与社交

GitHub 用户提及

Twitter 用户提及

Telegram 用户提及

自动显示名称

提示框 (Alerts)

NOTE

TIP

IMPORTANT

WARNING

CAUTION

定义列表

基础定义

带格式的定义

紧凑样式

脚注

多媒体

视频

LinkCard 组件

高级功能

缩写

详情折叠

Tabs 标签页

Excalidraw 手绘图

React 远程组件渲染

综合测试