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

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

***粗斜体文本***

~~删除线文本~~

这是 `行内代码` 示例

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

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

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

[Innei]{GH@Innei}

{TW@example}

{TG@example}

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

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

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

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

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

<https://github.com/Innei>

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

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

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

<div />

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

<div />

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

<div />

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

<div />

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

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

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

```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
- const old = "removed"
+ const new = "added"
```

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

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

$$

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}

$$

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

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

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

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

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

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

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

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

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

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

::: 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=3,gap=8}

Grid 第一格

Grid 第二格

Grid 第三格

:::

::: 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}
![](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://github.com/Innei/Shiro

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

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

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

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

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

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

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

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

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

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

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

Inline https://github.com/Innei

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

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

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

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

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

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

  - 列表项 1
  - 列表项 2

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

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

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

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

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

---

***

___

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

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