**Bold text** and __another bold style__

*Italic text* and _another italic style_

***Bold italic text***

~~Strikethrough text~~

This is an `inline code` example

This is text containing ||spoiler content, visible on hover|| within it.

This is text with ==highlighted marking==.

This is ++inserted text++.

[Innei]{GH@Innei}

{TW@example}

{TG@example}

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

- First item
  - Nested 1.1
  - Nested 1.2
- Second item
- Third item

1. Step one
2. Step two
   1. Sub-step 2.1
   2. Sub-step 2.2
      1. Sub-step 2.2.1
3. Step three

- [ ] Incomplete task
- [x] Completed task
- [ ] Another to-do item

[Innei's Blog](https://innei.in)

<https://github.com/Innei>

![Example image](https://loremflickr.com/640/480/nature "A nature landscape photo")

> This is a regular blockquote text.
>
> > Nested blockquotes are also supported.

> [!NOTE]
> This is a **note** message, providing supplementary information users should be aware of.

<div />

> [!TIP]
> This is a **tip** message, offering better operational suggestions.

<div />

> [!IMPORTANT]
> This is an **important** message that users need to know to achieve their goals.

<div />

> [!WARNING]
> This is a **warning** message that requires immediate user attention to avoid issues.

<div />

> [!CAUTION]
> This is a **caution** message, alerting to risks or negative consequences of certain actions.

| Feature | Syntax | Description |
|------|------|------|
| Bold | `**text**` | Bold display |
| Italic | `*text*` | Italic display |
| Highlight | `==text==` | Highlight mark |
| Insert | `++text++` | Underline |

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

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

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

Polynomial: $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}

$$

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

[^1]: This is the content of the first footnote.
[^note]: This is the content of the second footnote, with interactive popup preview support.

::: info
This is an **info** tip, with internal Markdown rendering support.
:::

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

::: error
This is an **error** tip, indicating a serious issue.
:::

::: success
This is a **success** tip, the operation has been completed successfully.
:::

::: note
This is also an alias for the info tip, equivalent to `info`.
:::

::: danger
This is also an alias for the error tip, equivalent to `error`.
:::

::: banner {warn}
A warning banner created with banner syntax, type specified via parameter.
:::

::: banner {info}
An info banner created with banner syntax.
:::

::: gallery
![Image 1](https://loremflickr.com/640/480/city?1)
![Image 2](https://loremflickr.com/640/480/city?2)
![Image 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 cell one

Grid cell two

Grid cell three

:::

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

<!-- Internal content -->
<LinkCard source="self" id="posts/category/slug">
<LinkCard source="self" id="notes/nid">

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

<!-- Academic / Code -->
<LinkCard source="arxiv" id="2301.00001">
<LinkCard source="leetcode" id="two-sum">

<Tabs>
  <Tab label="React">
    React is a JavaScript library for building user interfaces.
  </Tab>
  <Tab label="Vue">
    Vue is a progressive JavaScript framework.
  </Tab>
  <Tab label="Svelte">
    Svelte is a compile-time frontend framework.
  </Tab>
</Tabs>

<details>
  <summary>Click to expand details</summary>

  This is the collapsed content, with internal Markdown rendering support.

  - List item 1
  - List item 2

  **Bold** and *italic* also work normally.
</details>

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

```mermaid
flowchart TD
    A[Start] --> B{Condition Check}
    B -->|Yes| C[Execute Action]
    B -->|No| D[Skip]
    C --> E[End]
    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 is the chemical formula for water