Shiroi Markdown 格式示例
本文档展示了 Shiroi 博客系统支持的所有 Markdown 格式，每个功能都包含代码和效果两部分。
一、基础文本格式
粗体
**粗体文本** 和 __另一种粗体__
粗体文本 和 另一种粗体
斜体
*斜体文本* 和 _另一种斜体_
斜体文本 和 另一种斜体
粗斜体
***粗斜体文本***
粗斜体文本
删除线（GFM）
~~删除线文本~~
删除线文本
行内代码
这是 `行内代码` 示例
这是 行内代码 示例
二、Shiroi 自定义行内语法
剧透/隐藏文本（Spoiler）
悬停鼠标才能看到内容。
这是一段包含 ||剧透内容，鼠标悬停可见|| 的文字。
这是一段包含 剧透内容，鼠标悬停可见 的文字。
高亮标记（Mark）
这是一段 ==被高亮标记== 的文字。
这是一段 被高亮标记 的文字。
插入文本 / 下划线（Insert）
这是一段 ++被插入的文本++ 。
这是一段 被插入的文本 。
社交平台 Mention
支持 GitHub（GH）、Twitter（TW）、Telegram（TG）三种平台。
[Innei]{GH@Innei}
{TW@example}
{TG@example}
三、标题（H1 - H6）
标题会自动生成锚点链接，支持中文字符的 slug。
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
（标题效果见本文档各章节）
四、列表
无序列表
- 第一项
- 嵌套 1.1
- 嵌套 1.2
- 第二项
- 第三项
- 第一项
- 嵌套 1.1
- 嵌套 1.2
- 第二项
- 第三项
有序列表
1. 第一步
2. 第二步
1. 子步骤 2.1
2. 子步骤 2.2
1. 子步骤 2.2.1
3. 第三步
- 第一步
- 第二步
- 子步骤 2.1
- 子步骤 2.2
- 子步骤 2.2.1
- 第三步
GFM 任务列表
- [ ] 未完成的任务
- [x] 已完成的任务
- [ ] 另一个待办事项
- 未完成的任务
- 已完成的任务
- 另一个待办事项
五、链接与图片
普通链接
[Innei 的博客](https://innei.in)
自动链接
<https://github.com/Innei>
图片
一张自然风光图片
六、引用
普通引用
> 这是一段普通的引用文本。
>
> > 嵌套引用也是支持的。
这是一段普通的引用文本。
嵌套引用也是支持的。
GFM Alerts（GitHub 风格警告框）
注意：相邻的多个 Alert 之间需要用 <div /> 分隔，否则会被合并为一个引用块。
> [!NOTE]
> 这是一条**注意**信息，用于补充说明用户应该了解的内容。
<div />
> [!TIP]
> 这是一条**提示**信息，提供更好的操作建议。
<div />
> [!IMPORTANT]
> 这是一条**重要**信息，用户需要知道以达成目标。
<div />
> [!WARNING]
> 这是一条**警告**信息，需要用户立即注意以避免问题。
<div />
> [!CAUTION]
> 这是一条**危险**信息，提醒某些操作的风险或负面后果。
[!NOTE] 这是一条注意信息，用于补充说明用户应该了解的内容。
Tip这是一条提示信息，提供更好的操作建议。
Important这是一条重要信息，用户需要知道以达成目标。
Warning这是一条警告信息，需要用户立即注意以避免问题。
Caution这是一条危险信息，提醒某些操作的风险或负面后果。
七、表格（GFM）
| 功能 | 语法 | 说明 |
|------|------|------|
| 粗体 | `**text**` | 加粗显示 |
| 斜体 | `*text*` | 倾斜显示 |
| 高亮 | `==text==` | 标记高亮 |
| 插入 | `++text++` | 下划线 |
| 功能 | 语法 | 说明 |
|---|---|---|
| 粗体 | **text** | 加粗显示 |
| 斜体 | *text* | 倾斜显示 |
| 高亮 | ==text== | 标记高亮 |
| 插入 | ++text++ | 下划线 |
八、代码块（Shiki 高亮）
支持 200+ 种语言的语法高亮，使用 GitHub Light/Dark 主题。
TypeScript
```typescript
interface User {
name: string
age: number
}
const greet = (user: User): string => {
return `Hello, ${user.name}!`
}
```
interface User {
name: string
age: number
}
const greet = (user: User): string => {
return `Hello, ${user.name}!`
}
JSX/TSX
```tsx
const App: React.FC = () => {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
)
}
```
const App: React.FC = () => {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
)
}
Diff 标记
```diff
- const old = "removed"
+ const new = "added"
```
- const old = "removed"
+ const new = "added"
九、数学公式（KaTeX）
行内公式
爱因斯坦质能方程：$ E = mc^2 $
二次方程求根公式：$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$
多项式：$P(x) = a_nx^n+a_{n-1}x^{n-1} + \dots + a_1x + a_0$
爱因斯坦质能方程：$ E = mc^2 $
二次方程求根公式：$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$
多项式：$P(x) = anx^n+a{n-1}x^{n-1} + \dots + a1x + a0$
块级公式
$$
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.
$$
$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$
十、脚注（GFM Footnotes）
脚注支持交互式弹出预览，点击可跳转到脚注定义处。
这是一段包含脚注的文本[^1]，还有另一个脚注[^note]。
[^1]: 这是第一个脚注的内容。
[^note]: 这是第二个脚注的内容，支持交互式弹出预览。
这是一段包含脚注的文本[^1]，还有另一个脚注[^note]。
十一、容器块（::: 语法）
警告/提示容器
支持类型：info、warning、error、success、note（等同 info）、danger（等同 error）。
::: info
这是一条 **信息** 提示，支持内部 Markdown 渲染。
:::
这是一条 信息 提示，支持内部 Markdown 渲染。
::: warning
这是一条 **警告** 提示，请注意相关内容。
:::
这是一条 警告 提示，请注意相关内容。
::: error
这是一条 **错误** 提示，表示严重问题。
:::
这是一条 错误 提示，表示严重问题。
::: success
这是一条 **成功** 提示，操作已顺利完成。
:::
这是一条 成功 提示，操作已顺利完成。
::: note
这也是信息提示的别名，等同于 `info`。
:::
这也是信息提示的别名，等同于
info。::: danger
这也是错误提示的别名，等同于 `error`。
:::
这也是错误提示的别名，等同于
error。Banner 容器
类型通过花括号参数指定：{warn}、{error}、{info}、{success}。
::: banner {warn}
通过 banner 语法创建的警告横幅，类型通过参数指定。
:::
通过 banner 语法创建的警告横幅，类型通过参数指定。
::: banner {info}
通过 banner 语法创建的信息横幅。
:::
通过 banner 语法创建的信息横幅。
图片轮播（Gallery / Carousel）
支持 Markdown 图片语法和直接 URL 两种写法，gallery 和 carousel 效果相同。
::: gallery
:::
::: carousel
https://loremflickr.com/640/480/nature?1
https://loremflickr.com/640/480/nature?2
https://loremflickr.com/640/480/nature?3
:::
网格布局（Grid）
参数：cols（列数）、gap（间距，默认 8）、rows（行数）、type（normal 或 images）。
::: grid {cols=3,gap=8}
Grid 第一格
Grid 第二格
Grid 第三格
:::
Grid 第一格
Grid 第二格
Grid 第三格
图片网格（Grid type=images）
::: grid {cols=3,rows=3,gap=12,type=images}
:::
瀑布流布局（Masonry）
参数：gap（间距，默认 8）。响应式自动调整列数。
::: masonry {gap=8}
:::
十二、富链接（Rich Link）自动嵌入
独立行的 URL 会被自动识别并渲染为富卡片或嵌入内容，无需任何额外语法。
GitHub 仓库卡片
https://github.com/Innei/Shiro
GitHub Commit
https://github.com/vuejs/vitepress/commit/71eb11f72e60706a546b756dc3fd72d06e2ae4e2
GitHub PR
https://github.com/Innei/Shiro/pull/129
GitHub Issue
https://github.com/Innei/Shiro/issues/100
GitHub 文件预览（含代码行高亮）
https://github.com/Innei/Shiro/blob/108d4c3e927e1c9c9304e41a0631f91958477d9f/src/providers/root/modal-stack-provider.tsx
GitHub Gist 嵌入
https://gist.github.com/Innei/94b3e8f078d29e1820813a24a3d8b04e
https://gist.github.com/Innei/94b3e8f078d29e1820813a24a3d8b04e
YouTube 视频嵌入
https://www.youtube.com/watch?v=N93cTbtLCIM
Twitter/X 推文嵌入
https://twitter.com/zhizijun/status/1649822091234148352?s=20
Bilibili 视频嵌入
https://www.bilibili.com/video/BV1xx411c7mD
哔哩哔哩视频加载中...
CodeSandbox 嵌入
https://codesandbox.io/s/framer-motion-layoutroot-prop-forked-p39g96
普通外部链接（自动预览卡片）
未匹配到特定平台的 URL 会尝试通过插件匹配，渲染为通用链接预览卡片。
https://trpc.io/docs/client/react/useInfiniteQuery
https://trpc.io/docs/client/react/useInfiniteQuery
行内链接（不会变为卡片）
当 URL 不是独立成行，而是在段落中间时，不会被渲染为卡片，而是普通链接。
Inline [Innei](https://github.com/Innei)
Inline https://github.com/Innei
Inline Innei
Inline https://github.com/Innei
十三、LinkCard 组件
使用自定义 HTML 标签手动创建链接卡片，可精确控制来源和 ID。
GitHub 仓库卡片
<LinkCard source="gh-repo" id="mx-space/kami">
GitHub Commit 卡片
<LinkCard source="gh-commit" id="mx-space/kami/commit/e1eee4136c21ab03ab5690e17025777984c362a0">
站内文章卡片
<LinkCard source="self" id="posts/programming/hello-world">
所有支持的 source 类型
<!-- GitHub 系列 -->
<LinkCard source="gh-repo" id="owner/repo">
<LinkCard source="gh-commit" id="owner/repo/commit/sha">
<LinkCard source="gh-pr" id="owner/repo/number">
<LinkCard source="gh-issue" id="owner/repo/number">
<LinkCard source="gh-discussion" id="owner/repo/number">
<!-- 站内内容 -->
<LinkCard source="self" id="posts/category/slug">
<LinkCard source="self" id="notes/nid">
<!-- 媒体 -->
<LinkCard source="tmdb" id="movie/12345">
<LinkCard source="bangumi" id="subject/12345">
<LinkCard source="qq-music-song" id="song-id">
<LinkCard source="netease-music-song" id="song-id">
<!-- 学术 / 代码 -->
<LinkCard source="arxiv" id="2301.00001">
<LinkCard source="leetcode" id="two-sum">
十四、Tabs 选项卡
<Tabs>
<Tab label="React">
React 是一个用于构建用户界面的 JavaScript 库。
</Tab>
<Tab label="Vue">
Vue 是一个渐进式 JavaScript 框架。
</Tab>
<Tab label="Svelte">
Svelte 是一个编译时前端框架。
</Tab>
</Tabs>
React 是一个用于构建用户界面的 JavaScript 库。
十五、折叠面板（Details / Summary）
支持动画展开/折叠，打印时自动展开。
<details>
<summary>点击展开详细内容</summary>
这里是被折叠的内容，支持内部 Markdown 渲染。
- 列表项 1
- 列表项 2
**粗体** 和 *斜体* 也可以正常使用。
</details>
十六、视频
<Video src="https://example.com/video.mp4" />
十七、特殊代码块
Mermaid 流程图
```mermaid
flowchart TD
A[开始] --> B{条件判断}
B -->|是| C[执行操作]
B -->|否| D[跳过]
C --> E[结束]
D --> E
```
CodeBlock Loading...
Excalidraw 白板
Excalidraw 的剪贴板 JSON 数据可以直接粘贴到代码块中渲染。
```excalidraw
{"type":"excalidraw/clipboard","elements":[{"type":"rectangle","version":14,"versionNonce":1361369853,"isDeleted":false,"id":"_PSpf6pLwkWIJubC_tf9D","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":545.0390625,"y":387.296875,"strokeColor":"#1e1e1e","backgroundColor":"transparent","width":177.53515625,"height":138.328125,"seed":1495751197,"groupIds":[],"frameId":null,"roundness":{"type":3},"boundElements":[],"updated":1706954302946,"link":null,"locked":false}],"files":{}}
```
Excalidraw Loading...
远程 React 组件渲染
通过 CDN 加载远程 React 组件并渲染到页面中。
```component
import=https://cdn.jsdelivr.net/npm/@innei/react-cdn-components@0.0.7/dist/components/Firework.js
name=MDX.Firework
height=25
```
Component Loading...
十八、分隔线
三种写法效果相同：
---
***
___
十九、HTML 行内元素
上标
x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>
x2 + y2 = z2
下标
H<sub>2</sub>O 是水的化学式
H2O 是水的化学式
二十、格式速查表
| 分类 | 语法 | 说明 |
|---|---|---|
| 标准 Markdown | **粗体** | 加粗 |
*斜体* | 斜体 | |
`代码` | 行内代码 | |
> 引用 | 引用块 | |
[文本](url) | 链接 | |
 | 图片 | |
--- | 分隔线 | |
| GFM 扩展 | ~~删除线~~ | 删除线 |
- [x] 任务 | 任务列表 | |
| 表格 | | 表格 | |
[^1] | 脚注 | |
> [!NOTE] | GitHub Alert | |
| Shiroi 扩展 | ||剧透|| | 悬停显示 |
==高亮== | 文本标记 | |
++插入++ | 下划线/插入 | |
{GH@user} | 社交 Mention | |
| 数学公式 | $ 行内公式 $ | KaTeX 行内 |
$$ 块级公式 $$ | KaTeX 块级 | |
| 容器块 | ::: info/warning/error/success | 提示容器 |
::: banner {type} | Banner 横幅 | |
::: gallery / ::: carousel | 图片轮播 | |
::: grid {cols=N,gap=N} | 网格布局 | |
::: grid {type=images} | 图片网格 | |
::: masonry {gap=N} | 瀑布流布局 | |
| 自定义组件 | <LinkCard source="" id=""> | 链接卡片（13 种 source） |
<Tabs><Tab label=""> | 选项卡 | |
<details><summary> | 折叠面板 | |
<Video src=""> | 视频播放 | |
| 特殊代码块 | `mermaid | Mermaid 图表 |
`excalidraw | Excalidraw 白板 | |
`component | 远程 React 组件 | |
| 富链接 | 独立行 URL | 自动嵌入卡片 |