このドキュメントは、Shiroi ブログシステムがサポートするすべての Markdown 形式を示しています。各機能にはコードと効果の2つの部分が含まれています。
一、基本テキスト形式
太字
**太字テキスト** と __別の太字__
太字テキスト と 別の太字
イタリック
*イタリックテキスト* と _別のイタリック_
イタリックテキスト と 別のイタリック
太字イタリック
***太字イタリックテキスト***
太字イタリックテキスト
取り消し線（GFM）
~~取り消し線テキスト~~
取り消し線テキスト
インラインコード
これは `インラインコード` の例です
これは インラインコード の例です
二、Shiroi カスタムインライン構文
ネタバレ/隠しテキスト（Spoiler）
マウスをホバーすると内容が見えます。
これは ||ネタバレ内容、マウスホバーで表示|| を含んだ文章です。
これは ネタバレ内容、マウスホバーで表示 を含んだ文章です。
ハイライト（Mark）
これは ==ハイライトされた== 文章です。
これは ハイライトされた 文章です。
挿入テキスト / 下線（Insert）
これは ++挿入されたテキスト++ です。
これは 挿入されたテキスト です。
ソーシャルプラットフォームのメンション
GitHub（GH）、Twitter（TW）、Telegram（TG）の3つのプラットフォームをサポートしています。
[Innei]{GH@Innei}
{TW@example}
{TG@example}
三、見出し（H1 - H6）
見出しは自動的にアンカーリンクが生成され、中国語文字のスラッグをサポートしています。
# レベル1見出し
## レベル2見出し
### レベル3見出し
#### レベル4見出し
##### レベル5見出し
###### レベル6見出し
（見出しの効果は各セクションを参照）
四、リスト
順序なしリスト
- 1つ目
- ネスト 1.1
- ネスト 1.2
- 2つ目
- 3つ目
- 1つ目
- ネスト 1.1
- ネスト 1.2
- 2つ目
- 3つ目
順序付きリスト
1. ステップ1
2. ステップ2
1. サブステップ 2.1
2. サブステップ 2.2
1. サブステップ 2.2.1
3. ステップ3
- ステップ1
- ステップ2
- サブステップ 2.1
- サブステップ 2.2
- サブステップ 2.2.1
- ステップ3
GFM タスクリスト
- [ ] 未完了のタスク
- [x] 完了済みのタスク
- [ ] 別のやること
- 未完了のタスク
- 完了済みのタスク
- 別のやること
五、リンクと画像
通常リンク
[Innei のブログ](https://innei.in)
自動リンク
<https://github.com/Innei>
画像
自然風景画像
六、引用
通常引用
> これは通常の引用文です。
>
> > ネスト引用もサポートしています。
これは通常の引用文です。
ネスト引用もサポートしています。
GFM Alerts（GitHub スタイル警告ボックス）
注意：隣接する複数の Alert は <div /> で区切る必要があります。区切らないと1つの引用ブロックに統合されます。
> [!NOTE]
> これは**注意**情報で、ユーザーが把握すべき内容を補足説明します。
<div />
> [!TIP]
> これは**ヒント**情報で、より良い操作上のアドバイスを提供します。
<div />
> [!IMPORTANT]
> これは**重要**情報で、ユーザーが目標達成のために知っておくべき内容です。
<div />
> [!WARNING]
> これは**警告**情報で、問題を避けるためにユーザーが直ちに注意する必要があります。
<div />
> [!CAUTION]
> これは**危険**情報で、特定の操作のリスクや悪影響を注意喚起します。
[!NOTE] これは注意情報で、ユーザーが把握すべき内容を補足説明します。
Tip
これはヒント情報で、より良い操作上のアドバイスを提供します。
Important
これは重要情報で、ユーザーが目標達成のために知っておくべき内容です。
Warning
これは警告情報で、問題を避けるためにユーザーが直ちに注意する必要があります。
Caution
これは危険情報で、特定の操作のリスクや悪影響を注意喚起します。
七、テーブル（GFM）
| 機能 | 構文 | 説明 |
|------|------|------|
| 太字 | `**text**` | 太字表示 |
| イタリック | `*text*` | 斜体表示 |
| ハイライト | `==text==` | ハイライトマーク |
| 挿入 | `++text++` | 下線 |
| 機能 | 構文 | 説明 |
|---|---|---|
| 太字 | **text** | 太字表示 |
| イタリック | *text* | 斜体表示 |
| ハイライト | ==text== | ハイライトマーク |
| 挿入 | ++text++ | 下線 |
八、コードブロック（Shiki ハイライト）
200以上の言語のシンタックスハイライトをサポートし、GitHub Light/Dark テーマを使用します。
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>
)
}
```
const App: React.FC = () => {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
)
}
Diff マーク
```diff
- const old = "removed"
+ const new = "added"
```
- const old = "removed"
+ const new = "added"
九、数式（KaTeX）
インライン数式
アインシュタインの質量エネルギー方程式：$ 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$
アインシュタインの質量エネルギー方程式：$ E = mc^2 $
二次方程式の解の公式：$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$
多項式：$P(x) = anx^n+a{n-1}x^{n-1} + \dots + a1x + a0$
ブロック数式
$$
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}
$$
十、脚注（GFM Footnotes）
脚注はインタラクティブなポップアッププレビューをサポートしており、クリックすると脚注定義にジャンプします。
これは脚注を含むテキストです[^1]。別の脚注もあります[^note]。
[^1]: これが最初の脚注の内容です。
[^note]: これが2番目の脚注の内容です。インタラクティブなポップアッププレビューをサポートしています。
これは脚注を含むテキストです[^1]。別の脚注もあります[^note]。
十一、コンテナブロック（::: 構文）
警告/ヒントコンテナ
サポートタイプ：info、warning、error、success、note（info と同じ）、danger（error と同じ）。
::: info
これは**情報**ヒントで、内部の Markdown レンダリングをサポートしています。
:::
::: warning
これは**警告**ヒントです。関連する内容に注意してください。
:::
::: error
これは**エラー**ヒントで、深刻な問題を示します。
:::
::: success
これは**成功**ヒントで、操作が正常に完了しました。
:::
::: note
これも情報ヒントの別名で、`info` と同等です。
:::
::: danger
これもエラーヒントの別名で、`error` と同等です。
:::
Banner コンテナ
タイプは波括弧パラメータで指定します：{warn}、{error}、{info}、{success}。
::: banner {warn}
banner 構文で作成された警告バナー。タイプはパラメータで指定します。
:::
::: banner {info}
banner 構文で作成された情報バナー。
:::
画像ギャラリー/カルーセル（Gallery / Carousel）
Markdown 画像構文と直接 URL の両方の書き方をサポートし、gallery と carousel は同じ効果です。
::: gallery
:::
::: carousel
https://loremflickr.com/640/480/nature?1
https://loremflickr.com/640/480/nature?2
https://loremflickr.com/640/480/nature?3
:::
グリッドレイアウト（Grid）
パラメータ：cols（列数）、gap（間隔、デフォルト8）、rows（行数）、type（normal または images）。
::: grid {cols=3,gap=8}
Grid 1番目
Grid 2番目
Grid 3番目
:::
Grid 1番目
Grid 2番目
Grid 3番目
画像グリッド（Grid type=images）
::: grid {cols=3,rows=3,gap=12,type=images}
:::
メイソンリーレイアウト（Masonry）
パラメータ：gap（間隔、デフォルト8）。レスポンシブで自動的に列数を調整します。
::: masonry {gap=8}
:::
十二、リッチリンク（Rich Link）自動埋め込み
単独行のURLは自動的に認識され、リッチカードまたは埋め込みコンテンツとしてレンダリングされます。追加の構文は必要ありません。
GitHub リポジトリカード
https://github.com/Innei/Shiro
GitHub Commit
https://github.com/vuejs/vitepress/commit/71eb11f72e60706a546b756dc3fd72d06e2ae4e2
GitHub PR
https://github.com/Innei/Shiro/pull/129
GitHub Issue
https://github.com/Innei/Shiro/issues/100
GitHub ファイルプレビュー（コード行ハイライト付き）
https://github.com/Innei/Shiro/blob/108d4c3e927e1c9c9304e41a0631f91958477d9f/src/providers/root/modal-stack-provider.tsx
GitHub Gist 埋め込み
https://gist.github.com/Innei/94b3e8f078d29e1820813a24a3d8b04e
YouTube 動画埋め込み
https://www.youtube.com/watch?v=N93cTbtLCIM
Twitter/X ツイート埋め込み
https://twitter.com/zhizijun/status/1649822091234148352?s=20
Bilibili 動画埋め込み
https://www.bilibili.com/video/BV1xx411c7mD
哔哩哔哩视频加载中...
CodeSandbox 埋め込み
https://codesandbox.io/s/framer-motion-layoutroot-prop-forked-p39g96
通常の外部リンク（自動プレビューカード）
特定のプラットフォームにマッチしないURLは、プラグインによるマッチングを試み、汎用リンクプレビューカードとしてレンダリングされます。
https://trpc.io/docs/client/react/useInfiniteQuery
インラインリンク（カードにならない）
URLが単独行ではなく段落内にある場合、カードとしてレンダリングされず、通常のリンクになります。
Inline [Innei](https://github.com/Innei)
Inline https://github.com/Innei
Inline Innei
Inline https://github.com/Innei
十三、LinkCard コンポーネント
カスタムHTMLタグを使用して手動でリンクカードを作成でき、ソースとIDを正確に制御できます。
GitHub リポジトリカード
<LinkCard source="gh-repo" id="mx-space/kami">
GitHub Commit カード
<LinkCard source="gh-commit" id="mx-space/kami/commit/e1eee4136c21ab03ab5690e17025777984c362a0">
サイト内記事カード
<LinkCard source="self" id="posts/programming/hello-world">
サポートされているすべての source タイプ
<!-- 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 タブ
<Tabs>
<Tab label="React">
React はユーザーインターフェースを構築するためのJavaScriptライブラリです。
</Tab>
<Tab label="Vue">
Vue はプログレッシブなJavaScriptフレームワークです。
</Tab>
<Tab label="Svelte">
Svelte はコンパイル時に動作するフロントエンドフレームワークです。
</Tab>
</Tabs>
React はユーザーインターフェースを構築するためのJavaScriptライブラリです。
十五、折りたたみパネル（Details / Summary）
アニメーションで開閉をサポートし、印刷時には自動的に展開します。
<details>
<summary>クリックして詳細を展開</summary>
ここは折りたたまれた内容で、内部のMarkdownレンダリングをサポートしています。
- リスト項目 1
- リスト項目 2
**太字** と *イタリック* も正常に使用できます。
</details>
十六、ビデオ
<Video src="https://example.com/video.mp4" />
十七、特殊コードブロック
Mermaid フローチャート
```mermaid
flowchart TD
A[開始] --> B{条件判断}
B -->|はい| C[実行操作]
B -->|いいえ| D[スキップ]
C --> E[終了]
D --> E
```
CodeBlock Loading...
Excalidraw ホワイトボード
Excalidraw のクリップボードJSONデータをコードブロックに直接貼り付けてレンダリングできます。
```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…
リモート React コンポーネントレンダリング
CDN経由でリモートReactコンポーネントをロードしてページ内にレンダリングします。
```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...
十八、区切り線
3つの書き方はすべて同じ効果です：
---
***
___
十九、HTML インライン要素
上付き文字
x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>
x2 + y2 = z2
下付き文字
H<sub>2</sub>O は水の化学式です
H2O は水の化学式です
二十、書式早見表
| 分類 | 構文 | 説明 |
|---|---|---|
| 標準 Markdown | **太字** | 太字 |
*イタリック* | 斜体 | |
`コード` | インラインコード | |
> 引用 | 引用ブロック | |
[テキスト](url) | リンク | |
 | 画像 | |
--- | 区切り線 | |
| GFM 拡張 | ~~取り消し線~~ | 取り消し線 |
- [x] タスク | タスクリスト | |
| テーブル | | テーブル | |
[^1] | 脚注 | |
> [!NOTE] | GitHub Alert | |
| Shiroi 拡張 | ||ネタバレ|| | ホバー表示 |
==ハイライト== | テキストマーク | |
++挿入++ | 下線/挿入 | |
{GH@user} | ソーシャルメンション | |
| 数式 | $ インライン数式 $ | KaTeX インライン |
$$ ブロック数式 $$ | KaTeX ブロック | |
| コンテナブロック | ::: info/warning/error/success | ヒントコンテナ |
::: banner {type} | Banner バナー | |
::: gallery / ::: carousel | 画像カルーセル | |
::: grid {cols=N,gap=N} | グリッドレイアウト | |
::: grid {type=images} | 画像グリッド | |
::: masonry {gap=N} | メイソンリーレイアウト | |
| カスタムコンポーネント | <LinkCard source="" id=""> | リンクカード（13種類のsource） |
<Tabs><Tab label=""> | タブ | |
<details><summary> | 折りたたみパネル | |
<Video src=""> | 動画再生 | |
| 特殊コードブロック | `mermaid | Mermaid 図表 |
`excalidraw | Excalidraw ホワイトボード | |
`component | リモート React コンポーネント | |
| リッチリンク | 単独行URL | 自動埋め込みカード |
