**太字テキスト** と __もう一つの太字__

*斜体テキスト* と _もう一つの斜体_

***太字斜体テキスト***

~~取り消し線テキスト~~

これは `インラインコード` の例です

これは ||スポイラー内容、マウスホバーで表示|| を含むテキストです。

これは ==ハイライトされた== テキストです。

これは ++挿入されたテキスト++ です。

[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] 完了済みのタスク
- [ ] もう一つの TODO 項目

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

<ruby>アインシュタイン<rt>Einstein</rt></ruby>の質量エネルギー等価式：$ 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]: これは2番目の脚注の内容で、インタラクティブなポップアッププレビューに対応しています。

::: info
これは **情報** ヒントです。内部の Markdown <ruby>レンダリング<rt>rendering</rt></ruby>に対応しています。
:::

::: warning
これは **警告** ヒントです。関連する内容にご注意ください。
:::

::: error
これは **エラー** ヒントです。重大な問題を示しています。
:::

::: success
これは **成功** ヒントです。操作が正常に完了しました。
:::

::: note
これも情報ヒントの別名で、`info` と同等です。
:::

::: danger
これもエラーヒントの別名で、`error` と同等です。
:::

::: banner {warn}
banner 構文で作成された警告<ruby>バナー<rt>banner</rt></ruby>です。タイプは<ruby>パラメータ<rt>parameter</rt></ruby>で指定します。
:::

::: banner {info}
banner 構文で作成された情報<ruby>バナー<rt>banner</rt></ruby>です。
:::

::: 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 はコンパイル時の<ruby>フロントエンド<rt>frontend</rt></ruby>フレームワークです。
  </Tab>
</Tabs>

<details>
  <summary>クリックして詳細を展開</summary>

  ここは折りたたまれた内容で、内部の Markdown <ruby>レンダリング<rt>rendering</rt></ruby>に対応しています。

  - リスト項目 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 は水の化学式です