Shiroi Markdown Formatting Examples

This document demonstrates all Markdown formats supported by the Shiroi blog system. Each feature includes both code and effect sections.

I. Basic Text Formatting

Bold

CodeBlock Loading...

Bold text and another bold

Italic

CodeBlock Loading...

Italic text and another italic

Bold Italic

CodeBlock Loading...

Bold italic text

Strikethrough (GFM)

CodeBlock Loading...

~~Strikethrough text~~

Inline Code

CodeBlock Loading...

This is an inline code example

II. Shiroi Custom Inline Syntax

Spoiler/Hidden Text

Content visible on hover.

CodeBlock Loading...

This is a text containing ~~spoiler content, visible on hover~~.

Highlight Mark

CodeBlock Loading...

This is a highlighted text.

Inserted Text / Underline (Insert)

CodeBlock Loading...

This is a text that has been inserted.

Social Platform Mention

Supports three platforms: GitHub (GH), Twitter (TW), and Telegram (TG).

CodeBlock Loading...

Innei

example

III. Headings (H1 - H6)

Headings automatically generate anchor links and support Chinese character slugs.

CodeBlock Loading...

(Heading effects can be seen in the sections of this document)

IV. Lists

Unordered List

CodeBlock Loading...

Item 1
- Nested 1.1
- Nested 1.2
Item 2
Item 3

Ordered List

CodeBlock Loading...

Step 1
Step 2
1. Sub-step 2.1
2. Sub-step 2.2
  1. Sub-step 2.2.1
Step 3

GFM Task List

CodeBlock Loading...

Unfinished task
Completed task
Another to-do item

V. Links and Images

Normal Link

CodeBlock Loading...

Innei's Blog

Automatic Link

CodeBlock Loading...

https://github.com/Innei

Images

CodeBlock Loading...

Example Image — A natural landscape image

VI. Quotes

Normal Quote

CodeBlock Loading...

This is a normal quote text.
Nested quotes are also supported.

GFM Alerts (GitHub-style Alert Boxes)

Note: Multiple adjacent Alerts need to be separated by <div />, otherwise they will be merged into a single blockquote.

CodeBlock Loading...

[!NOTE] This is a NOTE message, used to supplement information users should be aware of.

Tip
This is a TIP message, providing better operational suggestions.

Important
This is an IMPORTANT message that users need to know to achieve their goals.

Warning
This is a WARNING message, requiring immediate user attention to avoid problems.

Caution
This is a CAUTION message, warning of risks or negative consequences of certain operations.

VII. Tables (GFM)

CodeBlock Loading...

Feature	Syntax	Description
Bold	`text`	Bold display
Italic	`text`	Italic display
Highlight	`==text==`	Mark highlight
Insert	`++text++`	Underline

VIII. Code Blocks (Shiki Highlighting)

Supports syntax highlighting for 200+ languages, using GitHub Light/Dark themes.

TypeScript

CodeBlock Loading...

JSX/TSX

CodeBlock Loading...

Diff Marking

CodeBlock Loading...

IX. Math Formulas (KaTeX)

Inline Formula

CodeBlock Loading...

Einstein's mass-energy equivalence equation：$ E = mc^2 $

Quadratic formula：$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$

Polynomial：$P(x) = anx^n+a{n-1}x^{n-1} + \dots + a1x + a0$

Block Formula

CodeBlock Loading...

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.

CodeBlock Loading...

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

X. Footnotes (GFM Footnotes)

Footnotes support interactive pop-up previews, clicking jumps to the footnote definition.

CodeBlock Loading...

This is a text containing a footnote^{[^1]}, and another footnote^{[^note]}.

XI. Container Blocks (::: Syntax)

Alert/Tip Containers

Supported types: info, warning, error, success, note (equivalent to info), danger (equivalent to error).

CodeBlock Loading...

This is an info tip, supporting internal Markdown rendering.

CodeBlock Loading...

This is a warning tip, please pay attention to the relevant content.

CodeBlock Loading...

This is an error tip, indicating a serious problem.

CodeBlock Loading...

This is a success tip, indicating the operation was completed successfully.

CodeBlock Loading...

This is also an alias for info tips, equivalent to info.

CodeBlock Loading...

This is also an alias for error tips, equivalent to error.

Types are specified via curly brace parameters: {warn}, {error}, {info}, {success}.

CodeBlock Loading...

A warning banner created with banner syntax, type specified by parameter.

CodeBlock Loading...

An info banner created with banner syntax.

Image Carousel (Gallery / Carousel)

Supports both Markdown image syntax and direct URL, gallery and carousel have the same effect.

CodeBlock Loading...

CodeBlock Loading...

Grid Layout (Grid)

Parameters: cols (number of columns), gap (spacing, default 8), rows (number of rows), type (normal or images).

CodeBlock Loading...

Grid Cell 1

Grid Cell 2

Grid Cell 3

Image Grid (Grid type=images)

CodeBlock Loading...

Masonry Layout (Masonry)

Parameters: gap (spacing, default 8). Responsive automatic column adjustment.

CodeBlock Loading...

XII. Rich Link Auto Embedding

URLs on a separate line are automatically recognized and rendered as rich cards or embedded content, without any additional syntax.

GitHub Repository Card

CodeBlock Loading...

GitHub Commit

CodeBlock Loading...

GitHub PR

CodeBlock Loading...

GitHub Issue

CodeBlock Loading...

GitHub File Preview (with code line highlighting)

CodeBlock Loading...

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

GitHub Gist Embedding

CodeBlock Loading...

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

YouTube Video Embedding

CodeBlock Loading...

Twitter/X Tweet Embedding

CodeBlock Loading...

Bilibili Video Embedding

CodeBlock Loading...

哔哩哔哩视频加载中...

CodeSandbox Embedding

CodeBlock Loading...

Normal External Link (Automatic Preview Card)

URLs not matching specific platforms will attempt to match via plugins and render as generic link preview cards.

CodeBlock Loading...

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

Inline Links (Will not become cards)

When a URL is not on a separate line but in the middle of a paragraph, it will not be rendered as a card, but as a normal link.

CodeBlock Loading...

Inline Innei

Inline https://github.com/Innei

XIII. LinkCard Component

Manually create link cards using custom HTML tags, with precise control over source and ID.

GitHub Repository Card

CodeBlock Loading...

GitHub Commit Card

CodeBlock Loading...

Internal Article Card

CodeBlock Loading...

All Supported Source Types

CodeBlock Loading...

XIV. Tabs

CodeBlock Loading...

React is a JavaScript library for building user interfaces.

XV. Collapsible Panel (Details / Summary)

Supports animated expand/collapse, automatically expands when printing.

CodeBlock Loading...

XVI. Video

CodeBlock Loading...

XVII. Special Code Blocks

Mermaid Flowchart

CodeBlock Loading...

Excalidraw Whiteboard

Excalidraw clipboard JSON data can be directly pasted into the code block for rendering.

CodeBlock Loading...

Excalidraw Loading...

Remote React Component Rendering

Load remote React components via CDN and render them on the page.

CodeBlock Loading...

Component Loading...

XVIII. Horizontal Rule

Three ways to write with the same effect:

CodeBlock Loading...

XIX. HTML Inline Elements

Superscript

CodeBlock Loading...

x² + y² = z²

Subscript

CodeBlock Loading...

H₂O is the chemical formula for water

XX. Format Quick Reference

Category	Syntax	Description
Standard Markdown	`粗体`	Bold
	`斜体`	Italic
	`代码`	Inline code
	`> 引用`	Blockquote
	`[文本](url)`	Link
	`![alt](url)`	Image
	`---`	Horizontal rule
GFM Extensions	`~~删除线~~`	Strikethrough
	`- [x] 任务`	Task list
	`\| 表格 \|`	Table
	`[^1]`	Footnote
	`> [!NOTE]`	GitHub Alert
Shiroi Extensions	`\|\|剧透\|\|`	Hover to show
	`==高亮==`	Text mark
	`++插入++`	Underline/Insert
	`{GH@user}`	Social Mention
Math Formulas	$ 行内公式 $	KaTeX inline
	`$$ 块级公式 $$`	KaTeX block
Container Blocks	`::: info/warning/error/success`	Tip container
	`::: banner {type}`	Banner
	`::: gallery` / `::: carousel`	Image carousel
	`::: grid {cols=N,gap=N}`	Grid layout
	`::: grid {type=images}`	Image grid
	`::: masonry {gap=N}`	Masonry layout
Custom Components	`<LinkCard source="" id="">`	Link Card (13 sources)
	`<Tabs><Tab label="">`	Tabs
	`<details><summary>`	Collapsible panel
	`<Video src="">`	Video playback
Special Code Blocks	``mermaid`	Mermaid chart
	``excalidraw`	Excalidraw whiteboard
	``component`	Remote React component
Rich Links	独立行 URL	Auto-embed card

1: This is the content of the first footnote.
Return1
note: This is the content of the second footnote, supporting interactive pop-up previews.
Returnnote

This document demonstrates all Markdown formats supported by the Shiroi blog system. Each feature includes both code and effect sections.

I. Basic Text Formatting

Bold

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

CodeBlock Loading...

Bold text and another bold

Italic

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

CodeBlock Loading...

Italic text and another italic

Bold Italic

***粗斜体文本***

CodeBlock Loading...

Bold italic text

Strikethrough (GFM)

~~删除线文本~~

CodeBlock Loading...

~~Strikethrough text~~

Inline Code

这是 `行内代码` 示例

CodeBlock Loading...

This is an inline code example

II. Shiroi Custom Inline Syntax

Spoiler/Hidden Text

Content visible on hover.

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

CodeBlock Loading...

This is a text containing ~~spoiler content, visible on hover~~.

Highlight Mark

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

CodeBlock Loading...

This is a highlighted text.

Inserted Text / Underline (Insert)

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

CodeBlock Loading...

This is a text that has been inserted.

Social Platform Mention

Supports three platforms: GitHub (GH), Twitter (TW), and Telegram (TG).

[Innei]{GH@Innei}

{TW@example}

{TG@example}

CodeBlock Loading...

Innei

example

III. Headings (H1 - H6)

Headings automatically generate anchor links and support Chinese character slugs.

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

CodeBlock Loading...

(Heading effects can be seen in the sections of this document)

IV. Lists

Unordered List

- 第一项
  - 嵌套 1.1
  - 嵌套 1.2
- 第二项
- 第三项

CodeBlock Loading...

Item 1
- Nested 1.1
- Nested 1.2
Item 2
Item 3

Ordered List

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

CodeBlock Loading...

Step 1
Step 2
1. Sub-step 2.1
2. Sub-step 2.2
  1. Sub-step 2.2.1
Step 3

GFM Task List

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

CodeBlock Loading...

Unfinished task
Completed task
Another to-do item

V. Links and Images

Normal Link

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

CodeBlock Loading...

Innei's Blog

Automatic Link

<https://github.com/Innei>

CodeBlock Loading...

https://github.com/Innei

Images

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

CodeBlock Loading...

VI. Quotes

Normal Quote

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

CodeBlock Loading...

This is a normal quote text.
Nested quotes are also supported.

GFM Alerts (GitHub-style Alert Boxes)

Note: Multiple adjacent Alerts need to be separated by <div />, otherwise they will be merged into a single blockquote.

> [!NOTE]
> 这是一条**注意**信息，用于补充说明用户应该了解的内容。

<div />

> [!TIP]
> 这是一条**提示**信息，提供更好的操作建议。

<div />

> [!IMPORTANT]
> 这是一条**重要**信息，用户需要知道以达成目标。

<div />

> [!WARNING]
> 这是一条**警告**信息，需要用户立即注意以避免问题。

<div />

> [!CAUTION]
> 这是一条**危险**信息，提醒某些操作的风险或负面后果。

CodeBlock Loading...

[!NOTE] This is a NOTE message, used to supplement information users should be aware of.

Tip
This is a TIP message, providing better operational suggestions.

Important
This is an IMPORTANT message that users need to know to achieve their goals.

Warning
This is a WARNING message, requiring immediate user attention to avoid problems.

Caution
This is a CAUTION message, warning of risks or negative consequences of certain operations.

VII. Tables (GFM)

| 功能 | 语法 | 说明 |
|------|------|------|
| 粗体 | `**text**` | 加粗显示 |
| 斜体 | `*text*` | 倾斜显示 |
| 高亮 | `==text==` | 标记高亮 |
| 插入 | `++text++` | 下划线 |

CodeBlock Loading...

Feature	Syntax	Description
Bold	`text`	Bold display
Italic	`text`	Italic display
Highlight	`==text==`	Mark highlight
Insert	`++text++`	Underline

VIII. Code Blocks (Shiki Highlighting)

Supports syntax highlighting for 200+ languages, using GitHub Light/Dark themes.

TypeScript

```typescript
interface User {
  name: string
  age: number
}

const greet = (user: User): string => {
  return `Hello, ${user.name}!`
}
```

CodeBlock Loading...

interface User {
  name: string
  age: number
}

const greet = (user: User): string => {
  return `Hello, ${user.name}!`
}

CodeBlock Loading...

JSX/TSX

```tsx
const App: React.FC = () => {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  )
}
```

CodeBlock Loading...

TSX

const App: React.FC = () => {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  )
}

CodeBlock Loading...

Diff Marking

```diff
- const old = "removed"
+ const new = "added"
```

CodeBlock Loading...

DIFF

- const old = "removed"
+ const new = "added"

CodeBlock Loading...

IX. Math Formulas (KaTeX)

Inline Formula

爱因斯坦质能方程：$ 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$

CodeBlock Loading...

Einstein's mass-energy equivalence equation：$ E = mc^2 $

Quadratic formula：$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$

Polynomial：$P(x) = anx^n+a{n-1}x^{n-1} + \dots + a1x + a0$

Block Formula

$$

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.

$$

CodeBlock Loading...

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}

$$

CodeBlock Loading...

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

X. Footnotes (GFM Footnotes)

Footnotes support interactive pop-up previews, clicking jumps to the footnote definition.

这是一段包含脚注的文本[^1]，还有另一个脚注[^note]。

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

CodeBlock Loading...

This is a text containing a footnote^{[^1]}, and another footnote^{[^note]}.

XI. Container Blocks (::: Syntax)

Alert/Tip Containers

Supported types: info, warning, error, success, note (equivalent to info), danger (equivalent to error).

::: info
这是一条 **信息** 提示，支持内部 Markdown 渲染。
:::

CodeBlock Loading...

This is an info tip, supporting internal Markdown rendering.

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

CodeBlock Loading...

This is a warning tip, please pay attention to the relevant content.

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

CodeBlock Loading...

This is an error tip, indicating a serious problem.

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

CodeBlock Loading...

This is a success tip, indicating the operation was completed successfully.

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

CodeBlock Loading...

This is also an alias for info tips, equivalent to info.

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

CodeBlock Loading...

This is also an alias for error tips, equivalent to error.

Types are specified via curly brace parameters: {warn}, {error}, {info}, {success}.

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

CodeBlock Loading...

A warning banner created with banner syntax, type specified by parameter.

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

CodeBlock Loading...

An info banner created with banner syntax.

Image Carousel (Gallery / Carousel)

Supports both Markdown image syntax and direct URL, gallery and carousel have the same effect.

::: 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)
:::

CodeBlock Loading...

::: carousel
https://loremflickr.com/640/480/nature?1
https://loremflickr.com/640/480/nature?2
https://loremflickr.com/640/480/nature?3
:::

CodeBlock Loading...

Grid Layout (Grid)

Parameters: cols (number of columns), gap (spacing, default 8), rows (number of rows), type (normal or images).

::: grid {cols=3,gap=8}

Grid 第一格

Grid 第二格

Grid 第三格

:::

CodeBlock Loading...

Grid Cell 1

Grid Cell 2

Grid Cell 3

Image 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)
:::

CodeBlock Loading...

Masonry Layout (Masonry)

Parameters: gap (spacing, default 8). Responsive automatic column adjustment.

::: 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)
:::

CodeBlock Loading...

XII. Rich Link Auto Embedding

URLs on a separate line are automatically recognized and rendered as rich cards or embedded content, without any additional syntax.

GitHub Repository Card

https://github.com/Innei/Shiro

CodeBlock Loading...

GitHub Commit

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

CodeBlock Loading...

GitHub PR

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

CodeBlock Loading...

GitHub Issue

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

CodeBlock Loading...

GitHub File Preview (with code line highlighting)

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

CodeBlock Loading...

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

GitHub Gist Embedding

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

CodeBlock Loading...

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

YouTube Video Embedding

https://www.youtube.com/watch?v=N93cTbtLCIM

CodeBlock Loading...

Twitter/X Tweet Embedding

https://twitter.com/zhizijun/status/1649822091234148352?s=20

CodeBlock Loading...

Bilibili Video Embedding

https://www.bilibili.com/video/BV1xx411c7mD

CodeBlock Loading...

哔哩哔哩视频加载中...

CodeSandbox Embedding

https://codesandbox.io/s/framer-motion-layoutroot-prop-forked-p39g96

CodeBlock Loading...

Normal External Link (Automatic Preview Card)

URLs not matching specific platforms will attempt to match via plugins and render as generic link preview cards.

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

CodeBlock Loading...

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

Inline Links (Will not become cards)

When a URL is not on a separate line but in the middle of a paragraph, it will not be rendered as a card, but as a normal link.

Inline [Innei](https://github.com/Innei)

Inline https://github.com/Innei

CodeBlock Loading...

Inline Innei

Inline https://github.com/Innei

XIII. LinkCard Component

Manually create link cards using custom HTML tags, with precise control over source and ID.

GitHub Repository Card

<LinkCard source="gh-repo" id="mx-space/kami">

CodeBlock Loading...

GitHub Commit Card

<LinkCard source="gh-commit" id="mx-space/kami/commit/e1eee4136c21ab03ab5690e17025777984c362a0">

CodeBlock Loading...

Internal Article Card

<LinkCard source="self" id="posts/programming/hello-world">

CodeBlock Loading...

All Supported Source Types

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

CodeBlock Loading...

XIV. Tabs

<Tabs>
  <Tab label="React">
    React 是一个用于构建用户界面的 JavaScript 库。
  </Tab>
  <Tab label="Vue">
    Vue 是一个渐进式 JavaScript 框架。
  </Tab>
  <Tab label="Svelte">
    Svelte 是一个编译时前端框架。
  </Tab>
</Tabs>

CodeBlock Loading...

React is a JavaScript library for building user interfaces.

XV. Collapsible Panel (Details / Summary)

Supports animated expand/collapse, automatically expands when printing.

<details>
  <summary>点击展开详细内容</summary>

  这里是被折叠的内容，支持内部 Markdown 渲染。

  - 列表项 1
  - 列表项 2

  **粗体** 和 *斜体* 也可以正常使用。
</details>

CodeBlock Loading...

XVI. Video

<Video src="https://example.com/video.mp4" />

CodeBlock Loading...

XVII. Special Code Blocks

Mermaid Flowchart

```mermaid
flowchart TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作]
    B -->|否| D[跳过]
    C --> E[结束]
    D --> E
```

CodeBlock Loading...

flowchart TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作]
    B -->|否| D[跳过]
    C --> E[结束]
    D --> E

CodeBlock Loading...

Excalidraw Whiteboard

Excalidraw clipboard JSON data can be directly pasted into the code block for rendering.

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

CodeBlock Loading...

Excalidraw Loading...

Remote React Component Rendering

Load remote React components via CDN and render them on the page.

```component
import=https://cdn.jsdelivr.net/npm/@innei/react-cdn-components@0.0.7/dist/components/Firework.js
name=MDX.Firework
height=25
```

CodeBlock Loading...

Component Loading...

XVIII. Horizontal Rule

Three ways to write with the same effect:

---

CodeBlock Loading...

***

CodeBlock Loading...

___

CodeBlock Loading...

XIX. HTML Inline Elements

Superscript

x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>

CodeBlock Loading...

x² + y² = z²

Subscript

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

CodeBlock Loading...

H₂O is the chemical formula for water

XX. Format Quick Reference

Category	Syntax	Description
Standard Markdown	`粗体`	Bold
	`斜体`	Italic
	`代码`	Inline code
	`> 引用`	Blockquote
	`[文本](url)`	Link
	`![alt](url)`	Image
	`---`	Horizontal rule
GFM Extensions	`~~删除线~~`	Strikethrough
	`- [x] 任务`	Task list
	`\| 表格 \|`	Table
	`[^1]`	Footnote
	`> [!NOTE]`	GitHub Alert
Shiroi Extensions	`\|\|剧透\|\|`	Hover to show
	`==高亮==`	Text mark
	`++插入++`	Underline/Insert
	`{GH@user}`	Social Mention
Math Formulas	$ 行内公式 $	KaTeX inline
	`$$ 块级公式 $$`	KaTeX block
Container Blocks	`::: info/warning/error/success`	Tip container
	`::: banner {type}`	Banner
	`::: gallery` / `::: carousel`	Image carousel
	`::: grid {cols=N,gap=N}`	Grid layout
	`::: grid {type=images}`	Image grid
	`::: masonry {gap=N}`	Masonry layout
Custom Components	`<LinkCard source="" id="">`	Link Card (13 sources)
	`<Tabs><Tab label="">`	Tabs
	`<details><summary>`	Collapsible panel
	`<Video src="">`	Video playback
Special Code Blocks	``mermaid`	Mermaid chart
	``excalidraw`	Excalidraw whiteboard
	``component`	Remote React component
Rich Links	独立行 URL	Auto-embed card

1: This is the content of the first footnote.
Return1
note: This is the content of the second footnote, supporting interactive pop-up previews.
Returnnote

Shiroi Markdown Formatting Examples

Shiroi Markdown Formatting Examples

I. Basic Text Formatting

Bold

Italic

Bold Italic

Strikethrough (GFM)

Inline Code

II. Shiroi Custom Inline Syntax

Spoiler/Hidden Text

Highlight Mark

Inserted Text / Underline (Insert)

Social Platform Mention

III. Headings (H1 - H6)

IV. Lists

Unordered List

Ordered List

GFM Task List

V. Links and Images

Normal Link

Automatic Link

Images

VI. Quotes

Normal Quote

GFM Alerts (GitHub-style Alert Boxes)

VII. Tables (GFM)

VIII. Code Blocks (Shiki Highlighting)

TypeScript

JSX/TSX

Diff Marking

IX. Math Formulas (KaTeX)

Inline Formula

Block Formula

X. Footnotes (GFM Footnotes)

XI. Container Blocks (::: Syntax)

Alert/Tip Containers

Banner Containers

Image Carousel (Gallery / Carousel)

Grid Layout (Grid)

Image Grid (Grid type=images)

Masonry Layout (Masonry)

XII. Rich Link Auto Embedding

GitHub Repository Card

GitHub Commit

GitHub PR

GitHub Issue

GitHub File Preview (with code line highlighting)

GitHub Gist Embedding

YouTube Video Embedding

Twitter/X Tweet Embedding

Bilibili Video Embedding

CodeSandbox Embedding

Normal External Link (Automatic Preview Card)

Inline Links (Will not become cards)

XIII. LinkCard Component

GitHub Repository Card

GitHub Commit Card

Internal Article Card

All Supported Source Types

XIV. Tabs

XV. Collapsible Panel (Details / Summary)

XVI. Video

XVII. Special Code Blocks

Mermaid Flowchart

Excalidraw Whiteboard

Remote React Component Rendering

XVIII. Horizontal Rule

XIX. HTML Inline Elements

Superscript

Subscript

XX. Format Quick Reference

I. Basic Text Formatting

Bold

Italic

Bold Italic

Strikethrough (GFM)

Inline Code

II. Shiroi Custom Inline Syntax

Spoiler/Hidden Text

Highlight Mark