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

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

Bold text and another bold

Italic

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

Italic text and another italic

Bold Italic

***粗斜体文本***

Bold italic text

Strikethrough (GFM)

~~删除线文本~~

~~Strikethrough text~~

Inline Code

这是 `行内代码` 示例

This is an inline code example

II. Shiroi Custom Inline Syntax

Spoiler/Hidden Text

Content visible on hover.

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

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

Highlight Mark

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

This is a highlighted text.

Inserted Text / Underline (Insert)

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

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}

Innei

example

III. Headings (H1 - H6)

Headings automatically generate anchor links and support Chinese character slugs.

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

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

IV. Lists

Unordered List

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

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

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] 已完成的任务
- [ ] 另一个待办事项

Unfinished task
Completed task
Another to-do item

V. Links and Images

Normal Link

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

Innei

Innei's personal blog on frontend and full-stack development — TypeScript, React, Next.js, AI engineering, indie hacking, travel and life.

Innei@__oQuery

Automatic Link

<https://github.com/Innei>

Innei - Overview

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

GitHub

Images

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

Example Image — A natural landscape image

VI. Quotes

Normal Quote

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

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]
> 这是一条**危险**信息，提醒某些操作的风险或负面后果。

[!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++` | 下划线 |

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

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 Marking

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

DIFF

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

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$

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.

$$

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}

X. Footnotes (GFM Footnotes)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 第三格

:::

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

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

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

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 File Preview (with code line highlighting)

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 Embedding

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

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

YouTube Video Embedding

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

Twitter/X Tweet Embedding

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

Bilibili Video Embedding

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

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

CodeSandbox Embedding

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

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

useInfiniteQuery() | tRPC

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

trpc.io

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

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

GitHub Commit Card

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

Internal Article Card

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

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

XIV. Tabs

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

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>

XVI. Video

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

XVII. Special Code Blocks

Mermaid Flowchart

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

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

Component Loading...

XVIII. Horizontal Rule

Three ways to write with the same effect:

---

***

___

XIX. HTML Inline Elements

Superscript

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

x² + y² = z²

Subscript

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

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

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