Markdown 記法リファレンス

このサイトで使える Markdown と Docusaurus 拡張記法をまとめたリファレンスです。記法のサンプルとレンダリング結果を併記しています。

このページの使い方

記事を書きながら「あれ、この書き方どうだったっけ?」となったときの早見表として使ってください。サンプルをそのままコピー & ペーストできます。

1. 基本の Markdown

見出し

# H1
## H2
### H3
#### H4
##### H5
###### H6

H1 はページタイトル (Frontmatter の title) と重複するため、本文では ## H2 から使うのが基本です。

段落・改行

段落 1

段落 2 (空行で区切る)

行末に半角スペース 2 つで  
強制改行 (推奨されない、`<br />` を使うほうが意図が明確)

強調

**太字** *斜体* ~~取り消し線~~ `インラインコード`

太字斜体 ~~取り消し線~~ インラインコード

- 順序なしリスト
- ネスト可能
  - サブ項目
  - サブ項目
- 戻る

1. 順序付きリスト
2. 番号は自動採番されるので `1.` で揃えても OK
3. ネストも可能
   1. サブ項目
   2. サブ項目

- [x] タスクリスト (完了)
- [ ] タスクリスト (未完)

順序なしリスト
ネスト可能
- サブ項目
- サブ項目
戻る

順序付きリスト
番号は自動採番されるので 1. で揃えても OK
ネストも可能
1. サブ項目
2. サブ項目

タスクリスト (完了)
タスクリスト (未完)

リンク

[Docusaurus 公式](https://docusaurus.io/)
[相対リンク (このサイト内)](./intro.md)
[アンカーリンク (同ページ内)](#見出し)
<https://example.com> (URL を直接書くと自動リンク)

画像

![alt テキスト](/img/sample.png)
![代替テキスト + タイトル](/img/sample.png "ホバー時に出るタイトル")

.markdown img セレクタが効くため、画像は自動でクリック → Lightbox 拡大表示されます。Lightbox を無効化したい画像には <img class="no-zoom" src="..." /> のように class="no-zoom" を付けてください。

コードブロック

基本

```typescript
const greeting: string = 'Hello, world!';
console.log(greeting);
```

const greeting: string = 'Hello, world!';
console.log(greeting);

ファイル名 (タイトル)

```typescript title="src/utils/greet.ts"
export const greet = (name: string) => `Hello, ${name}!`;
```

src/utils/greet.ts
export const greet = (name: string) => `Hello, ${name}!`;

行ハイライト

```typescript {2,4-5}
const a = 1;
const b = 2;          // 強調
const c = 3;
const d = 4;          // 強調
const e = 5;          // 強調
```

const a = 1;
const b = 2;
const c = 3;
const d = 4;
const e = 5;

行番号

```typescript showLineNumbers
function add(a: number, b: number) {
  return a + b;
}
```

function add(a: number, b: number) {
  return a + b;
}

テーブル

| ヘッダー A | ヘッダー B | ヘッダー C |
| --- | :---: | ---: |
| 左寄せ | 中央 | 右寄せ |
| データ | データ | データ |

ヘッダー A	ヘッダー B	ヘッダー C
左寄せ	中央	右寄せ
データ	データ	データ

引用

> 単一行の引用

> 複数行の
> 引用も書ける
>
> > ネストもできる

単一行の引用

複数行の引用も書ける

ネストもできる

水平線

---

フットノート

本文中に脚注を付ける[^memo]。

[^memo]: 脚注の内容はページ末尾にまとめて表示されます。

本文中に脚注を付ける¹。

2. Docusaurus の Admonitions (推奨)

このサイトでは情報の種別を強調する場合、Docusaurus の admonitions を使うのを推奨します。:::タイプタイトル で開始し ::: で終わります。

5 種類の admonition

:::note[メモ]
通常の注釈・補足情報。
:::

:::tip[役立つ情報]
推奨や Tips、ベストプラクティス。
:::

:::info[情報]
追加の文脈情報、参考情報。
:::

:::warning[注意]
注意が必要な操作や落とし穴。
:::

:::danger[重大な警告]
データ損失やセキュリティに関わる重要な警告。
:::

メモ

通常の注釈・補足情報。

役立つ情報

推奨や Tips、ベストプラクティス。

情報

追加の文脈情報、参考情報。

注意

注意が必要な操作や落とし穴。

重大な警告

データ損失やセキュリティに関わる重要な警告。

admonition の中で他の Markdown を使う

:::tip[コードを含む例]
リスト中で **太字** や `inline code` も使えます。

```typescript
const example = 'admonition の中もコードブロック OK';
```

- リスト
- も
- OK
:::

コードを含む例

リスト中で太字や inline code も使えます。

const example = 'admonition の中もコードブロック OK';

リスト
も
OK

3. GitHub Alerts スタイル (参考)

GitHub.com で使われている > [!NOTE] 形式の Alerts も書き方として知っておくと便利です。

> [!NOTE]
> 注釈です。

> [!TIP]
> 役立つヒントです。

> [!IMPORTANT]
> 重要な情報です。

> [!WARNING]
> 警告です。

> [!CAUTION]
> 致命的な注意事項です。

Docusaurus でのレンダリング

Docusaurus はデフォルトでは > [!NOTE] 形式を通常の引用 (blockquote) として表示します。GitHub と同じ装飾を出したい場合は remark-github-blockquote-alert プラグインを追加する必要があります。

このサイトでは Docusaurus の :::note 等の admonition を使うのを推奨します (上記 §2)。

4. Mermaid 図表

@docusaurus/theme-mermaid を有効化しているため、コードブロックの言語を mermaid にすると図として描画されます。

フローチャート

```mermaid
graph LR
  A[開始] --> B{条件}
  B -->|Yes| C[処理 1]
  B -->|No| D[処理 2]
  C --> E[終了]
  D --> E
```

シーケンス図

```mermaid
sequenceDiagram
  participant U as ユーザー
  participant F as フロントエンド
  participant B as バックエンド
  U->>F: フォーム送信
  F->>B: API リクエスト
  B-->>F: 200 OK
  F-->>U: 成功表示
```

マインドマップ

```mermaid
mindmap
  root((技術発信))
    ブログ
      週次
      月次
    ドキュメント
      ガイド
      リファレンス
    SNS
      X
      Zenn
```

ER 図 / クラス図 / Gantt チャート

erDiagram classDiagram gantt も同様にサポート。詳細は Mermaid 公式ドキュメントを参照。

5. KaTeX 数式

remark-math + rehype-katex で LaTeX 記法の数式を描画できます。

インライン

本文中に $E = mc^2$ のように埋め込めます。

本文中に $E = mc^2$ のように埋め込めます。

ブロック

$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$

\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}

行列

$$
A = \begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
$$

A = \begin{pmatrix} a & b \\ c & d \end{pmatrix}

6. Tabs (タブ切替)

.md ファイル冒頭でコンポーネントを import すると、タブ切替を埋め込めます (実体は MDX)。

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
  <TabItem value="ts" label="TypeScript" default>

  ```typescript
  const greet = (name: string) => `Hello, ${name}`;
  ```

  </TabItem>
  <TabItem value="js" label="JavaScript">

  ```javascript
  const greet = (name) => `Hello, ${name}`;
  ```

  </TabItem>
</Tabs>

TypeScript
JavaScript

const greet = (name: string) => `Hello, ${name}`;

const greet = (name) => `Hello, ${name}`;

7. Details (折りたたみ)

長い情報や補足を畳めます。

<details>
  <summary>クリックして詳細を表示</summary>

  ここに長い説明、コードサンプル、テーブルなどを書けます。

  ```typescript
  const hidden = 'detail content';
  ```

</details>

クリックして詳細を表示

ここに長い説明、コードサンプル、テーブルなどを書けます。

const hidden = 'detail content';

8. Frontmatter

各ページの先頭に YAML 形式で書きます。Docusaurus は title / description / tags 等を読み取って HTML head タグやサイドバーに反映します。

docs ページ用

---
sidebar_position: 1                # サイドバー内の表示順
title: ページタイトル              # ページ h1 + HTML title
description: メタディスクリプション # SEO 用 (og:description)
tags: [tag1, tag2]
slug: /custom-path                 # URL を上書き (任意)
hide_title: true                   # h1 を隠す (任意)
hide_table_of_contents: true       # 右側 TOC を隠す (任意)
toc_min_heading_level: 2           # TOC の最小レベル (任意)
toc_max_heading_level: 4           # TOC の最大レベル (任意)
---

blog 記事用

---
slug: my-post                      # URL の末尾
title: 記事タイトル
authors: [rasshii]                 # blog/authors.yml に定義したキー
tags: [tag1, tag2]
date: 2026-04-29                   # 公開日
draft: false                       # true で非公開
unlisted: false                    # true でサイトマップから除外
---

このサイトでは docusaurus-plugin-image-zoom を有効化しているため、本文中の画像をクリックするとモーダルで拡大表示されます。

![Sample](/img/sample.png)

特定の画像を Lightbox から除外したい場合は <img> タグで class="no-zoom" を指定:

<img src="/img/icon.svg" alt="アイコン" class="no-zoom" />

10. 内部リンクと相対パス

サイトのルート配下で公開されています。リンク・画像参照には以下のパターンを使い分けます。

用途	推奨	例
ドキュメント間のリンク	相対パス	`[他のページ](./naming.md)`
ブログ間のリンク	相対パス	`[別記事](./2026-04-29-welcome.md)`
トップへのリンク	サイトルートからの絶対	`[トップ](/)` (baseUrl は自動付与)
画像 (static/)	サイトルートからの絶対	`![](/img/sample.png)`

11. 文中の React コンポーネント (MDX)

.md ファイルでも import 文と JSX が使えます (MDX として処理されるため)。

import Highlight from '@site/src/components/Highlight';

<Highlight color="#8FB39A">これはハイライトされた文字列</Highlight>

実装する場合は src/components/Highlight.tsx のような React コンポーネントを用意します。

1. 基本の Markdown​

見出し​

段落・改行​

強調​

リスト​

リンク​

画像​

コードブロック​

基本​

ファイル名 (タイトル)​

行ハイライト​

行番号​

テーブル​

引用​

水平線​

フットノート​

2. Docusaurus の Admonitions (推奨)​

5 種類の admonition​

admonition の中で他の Markdown を使う​

3. GitHub Alerts スタイル (参考)​

4. Mermaid 図表​

フローチャート​

シーケンス図​

マインドマップ​

ER 図 / クラス図 / Gantt チャート​

5. KaTeX 数式​

インライン​

ブロック​

行列​

6. Tabs (タブ切替)​

7. Details (折りたたみ)​

8. Frontmatter​

docs ページ用​

blog 記事用​

9. 画像の Lightbox​

10. 内部リンクと相対パス​

11. 文中の React コンポーネント (MDX)​

関連リソース​

Footnotes​