Shiroi Markdown 格式示例

本文档展示了 Shiroi 博客系统支持的所有 Markdown 格式，每个功能都包含代码和效果两部分。

一、基础文本格式

粗体

**粗体文本** 和 __另一种粗体__

粗体文本 和 另一种粗体

斜体

*斜体文本* 和 _另一种斜体_

斜体文本 和 另一种斜体

粗斜体

***粗斜体文本***

粗斜体文本

删除线（GFM）

~~删除线文本~~

~~删除线文本~~

行内代码

这是 `行内代码` 示例

这是 行内代码 示例

二、Shiroi 自定义行内语法

剧透/隐藏文本（Spoiler）

悬停鼠标才能看到内容。

这是一段包含 ||剧透内容，鼠标悬停可见|| 的文字。

这是一段包含 ~~剧透内容，鼠标悬停可见~~ 的文字。

高亮标记（Mark）

这是一段 ==被高亮标记== 的文字。

这是一段被高亮标记的文字。

插入文本 / 下划线（Insert）

这是一段 ++被插入的文本++ 。

这是一段被插入的文本。

社交平台 Mention

支持 GitHub（GH）、Twitter（TW）、Telegram（TG）三种平台。

[Innei]{GH@Innei}

{TW@example}

{TG@example}

Innei

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. 第三步

第一步
第二步
1. 子步骤 2.1
2. 子步骤 2.2
  1. 子步骤 2.2.1
第三步

GFM 任务列表

- [ ] 未完成的任务
- [x] 已完成的任务
- [ ] 另一个待办事项

未完成的任务
已完成的任务
另一个待办事项

五、链接与图片

普通链接

[Innei 的博客](https://innei.in)

静かな森

致虚极，守静笃。

静かな森@__oQuery

自动链接

<https://github.com/Innei>

Innei - Overview

Digital Nomad. Design Engineer. Prompt Engineer. Making @mx-space @Afilmory @Torrent-Vibe. Building @lobehub. Gen-Z - Innei

GitHub

图片

![示例图片](https://loremflickr.com/640/480/nature "一张自然风光图片")

六、引用

普通引用

> 这是一段普通的引用文本。
>
> > 嵌套引用也是支持的。

这是一段普通的引用文本。
嵌套引用也是支持的。

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>
  )
}
```

TSX

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"
```

DIFF

- 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.

$$

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}

$$

\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 渲染。
:::

::: warning
这是一条 **警告** 提示，请注意相关内容。
:::

::: error
这是一条 **错误** 提示，表示严重问题。
:::

::: success
这是一条 **成功** 提示，操作已顺利完成。
:::

::: note
这也是信息提示的别名，等同于 `info`。
:::

::: danger
这也是错误提示的别名，等同于 `error`。
:::

类型通过花括号参数指定：{warn}、{error}、{info}、{success}。

::: banner {warn}
通过 banner 语法创建的警告横幅，类型通过参数指定。
:::

::: banner {info}
通过 banner 语法创建的信息横幅。
:::

图片轮播（Gallery / Carousel）

支持 Markdown 图片语法和直接 URL 两种写法，gallery 和 carousel 效果相同。

::: gallery
![图片1](https://loremflickr.com/640/480/city?1)
![图片2](https://loremflickr.com/640/480/city?2)
![图片3](https://loremflickr.com/640/480/city?3)
:::

::: 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}
![](https://loremflickr.com/640/480/city?1)
![](https://loremflickr.com/640/480/city?2)
![](https://loremflickr.com/640/480/city?3)
![](https://loremflickr.com/640/480/city?4)
![](https://loremflickr.com/640/480/city?5)
![](https://loremflickr.com/640/480/city?6)
![](https://loremflickr.com/640/480/city?7)
![](https://loremflickr.com/640/480/city?8)
![](https://loremflickr.com/640/480/city?9)
:::

瀑布流布局（Masonry）

参数：gap（间距，默认 8）。响应式自动调整列数。

::: masonry {gap=8}
![](https://loremflickr.com/640/480/city?1)
![](https://loremflickr.com/640/480/city?2)
![](https://loremflickr.com/640/480/city?3)
![](https://loremflickr.com/640/480/city?4)
:::

十二、富链接（Rich Link）自动嵌入

独立行的 URL 会被自动识别并渲染为富卡片或嵌入内容，无需任何额外语法。

GitHub 仓库卡片

https://github.com/Innei/Shiro

Repository · Innei

4.2k

Shiro

📜 A minimalist personal website embodying the purity of paper and freshness of snow.

TypeScript

GitHub Commit

https://github.com/vuejs/vitepress/commit/71eb11f72e60706a546b756dc3fd72d06e2ae4e2

Commit · vuejs/vitepress

71eb11f

fix(theme): fix theme without fonts emitting inter (#2588)

+9 −10brc-dd2023-07-05

GitHub PR

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

Pull Request · Innei/Shiro

#129

✨ feat: Optimize Footnote Display

merged+48 −8TNXG2023-10-28

GitHub Issue

https://github.com/Innei/Shiro/issues/100

Issue · Innei/Shiro

#100

chore(deps): bump postcss from 8.4.30 to 8.4.31 in /storybook

closeddependabot[bot]22023-10-04

GitHub 文件预览（含代码行高亮）

https://github.com/Innei/Shiro/blob/108d4c3e927e1c9c9304e41a0631f91958477d9f/src/providers/root/modal-stack-provider.tsx

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

useInfiniteQuery() | tRPC

- Your procedure needs to accept a cursor input of any type (string, number, etc) to expose this hook.

trpc.io

行内链接（不会变为卡片）

当 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":{}}
```

Whiteboard 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>

x² + y² = z²

下标

H<sub>2</sub>O 是水的化学式

H₂O 是水的化学式

二十、格式速查表

分类	语法	说明
标准 Markdown	`粗体`	加粗
	`斜体`	斜体
	`代码`	行内代码
	`> 引用`	引用块
	`[文本](url)`	链接
	`![alt](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	自动嵌入卡片

1: 这是第一个脚注的内容。
返回1
note: 这是第二个脚注的内容，支持交互式弹出预览。
返回note

Shiroi Markdown 格式示例

Shiroi Markdown 格式示例

一、基础文本格式

粗体

斜体

粗斜体

删除线（GFM）

行内代码

二、Shiroi 自定义行内语法

剧透/隐藏文本（Spoiler）

高亮标记（Mark）

插入文本 / 下划线（Insert）

社交平台 Mention

三、标题（H1 - H6）

四、列表

无序列表

有序列表

GFM 任务列表

五、链接与图片

普通链接

自动链接

图片

六、引用

普通引用

GFM Alerts（GitHub 风格警告框）

七、表格（GFM）

八、代码块（Shiki 高亮）

TypeScript

JSX/TSX

Diff 标记

九、数学公式（KaTeX）

行内公式

块级公式

十、脚注（GFM Footnotes）

十一、容器块（::: 语法）

警告/提示容器

Banner 容器

图片轮播（Gallery / Carousel）

网格布局（Grid）

图片网格（Grid type=images）

瀑布流布局（Masonry）

十二、富链接（Rich Link）自动嵌入

GitHub 仓库卡片

GitHub Commit

GitHub PR

GitHub Issue

GitHub 文件预览（含代码行高亮）

GitHub Gist 嵌入

YouTube 视频嵌入

Twitter/X 推文嵌入

Bilibili 视频嵌入

CodeSandbox 嵌入

普通外部链接（自动预览卡片）

行内链接（不会变为卡片）

十三、LinkCard 组件

GitHub 仓库卡片

GitHub Commit 卡片

站内文章卡片

所有支持的 source 类型

十四、Tabs 选项卡

十五、折叠面板（Details / Summary）

十六、视频

十七、特殊代码块

Mermaid 流程图

Excalidraw 白板

远程 React 组件渲染

十八、分隔线

十九、HTML 行内元素

上标

下标

二十、格式速查表