Markdown エディター

使い方

左側で Markdown を入力すると、右側にレンダリングされた HTML が表示されます。2 つのペインは連動してスクロールするため、長い文書でも位置が揃ったままです。ビュー切替で「分割」「プレビューのみ」（仕上がり確認向け）「ソースのみ」（執筆に集中したいとき）を切り替えられます。**文法リファレンス** ボタンを押すと、よく使う 14 種類の GFM 記法（見出し・強調・リスト・タスクリスト・リンク・画像・コード・引用・区切り線・テーブル）と書き方を一覧表示する折りたたみパネルが開きます。タスクのチェックボックスやフェンス付きコードブロックの書き方を思い出せないときに便利です。下書きはキー入力から 300 ms 後に localStorage へ自動保存されるので、タブを閉じてもこのページを再度開けば続きから書けます。

書いたものはリポジトリにコミット用なら Markdown（.md）として、メールなどでサクッと共有したいなら基本スタイル入りの単体 HTML ファイル（.html）としてダウンロードできます。「HTML をコピー」ボタンは本文マークアップだけをコピーするので、別の CMS やブログエディタへの貼り付けに使えます。パースには GFM を有効化した marked を使い、結果の HTML は DOMPurify で表示前にサニタイズされるため、信頼できないソースからの貼り付けでもスクリプトは実行されません。

例

| Feature | Status |
| --- | --- |
| Tables | done |
| Task lists | done |

┌──────────┬────────┐
│ Feature  │ Status │
├──────────┼────────┤
│ Tables   │ done   │
│ Task lists│ done   │
└──────────┴────────┘

- [x] Write the draft
- [ ] Review with the team
- [ ] Publish

☑ Write the draft
☐ Review with the team
☐ Publish

```ts
function greet(name: string): string {
  return `Hello, ${name}!`;
}
```

Renders as a monospace block with the language label preserved.

See [the spec](https://example.com/spec "Latest revision") for details.

See the spec for details.  (hover shows "Latest revision")

よくある質問

関連する概念

Markdown は 2004 年に、構造化された文書をプレーンテキストとしても読みやすく書けるようにする手段として登場しました。機械可読性を重視した HTML の意図的な反転です。John Gruber の最初の実装は当時の判断で柔軟に解釈するスタイルで、結果として柔軟性は高いものの曖昧さを残した仕様になりました。2014 年に開始された CommonMark がコーナーケース（*foo _bar* baz_ は厳密にどう解釈する？）を形式化し、現在ほとんどのモダンパーサーはこれを基底文法としています。

CommonMark の上にはコンテキスト別の機能を追加する「フレーバー」が存在します。GitHub Flavored Markdown（GFM）はテーブル・タスクリスト・打ち消し線・自動リンク・言語識別子付き fenced code block を追加し、本エディターが実装している方言でもあります。React プロジェクトで人気の MDX は JSX コンポーネントを文書内に直接埋め込めるようにします。Pandoc Markdown は脚注・引用・学術文書向け機能を多数追加します。いずれもプレーンテキストとして読める核心部分を共有し、プレビューに何が現れるかが違います。プラットフォーム間で移植性が重要な場合は CommonMark に留め、フレーバー固有機能は移行先が対応しているときだけ使うのが安全です。