Markdown Editor
リアルタイムでマークダウンをプレビューできます
Markdown
編集エリアPreview
プレビューMarkdown Editorについて
このMarkdown Editorは、リアルタイムでマークダウン文書のプレビューを確認できる便利なツールです。 左側のエディタでマークダウンを入力すると、右側のプレビューエリアで即座に結果を確認できます。
主な機能
- リアルタイムプレビュー
- 基本的なマークダウン記法のサポート
- GitHub Flavored Markdown (GFM) 対応
- セキュアなHTMLサニタイズ
対応しているマークダウン記法
- 見出し (#, ##, ###)
- 太字 (**text**)
- 斜体 (*text*)
- リスト (-, 1., 2.)
- リンク ([text](url))
- コードブロック (```)
- 引用 (> text)
- 水平線 (---)
- テーブル
Markdownとは？よくある質問（FAQ）
Markdownとは何ですか？
Markdown は John Gruber と Aaron Swartz が2004年に開発した軽量マークアップ言語で、プレーンテキストに `#` `*` `[]()` などの記号を加えるだけで見出し・太字・リスト・リンクなどの書式を表現できます。HTMLより簡潔に書けるため、GitHub の README、Notion、Qiita、Zenn、技術ブログなどで広く使われています。エンジニアの間ではほぼ標準的な記法となっています。
GitHub Flavored Markdown（GFM）とは？
GitHub が標準Markdown仕様（CommonMark）を拡張した独自仕様で、(1) テーブル記法（パイプ `|` 区切り）、(2) チェックボックス（`- [x]`、`- [ ]`）、(3) コードブロックのシンタックスハイライト、(4) 取り消し線（`~~text~~`）、(5) 自動URLリンク、を追加で提供します。本エディタは marked ライブラリの GFM サポートで対応しています。
どんな用途に使えますか？
(1) GitHub・GitLab の README.md 作成、(2) 技術ブログの執筆（Qiita / Zenn / dev.to）、(3) 議事録・会議メモの整理、(4) ドキュメンテーション（API リファレンス、設計書）、(5) Wiki・社内ナレッジベース、(6) Jupyter Notebookの説明セル、(7) Static Site Generator（Next.js MDX、Hugo、Jekyll）のコンテンツ作成、(8) 個人メモ・日記、など多様な用途で活用できます。
コードブロックのシンタックスハイライトは対応していますか？
本エディタは marked + DOMPurify を使った安全なプレビューを提供しており、コードブロック（```javascript` のような言語名指定）はpreタグで保持されます。本格的なシンタックスハイライト（カラフルな表示）には Prism.js / highlight.js などの統合が必要で、本エディタはシンプルなプレビューに特化しています。
プレビューが正しく表示されない場合は？
よくある原因: (1) `#` の後にスペース忘れ（`#見出し` → `# 見出し` に修正）、(2) リスト項目間の改行不足、(3) コードブロックの ``` が3つ揃っていない、(4) リンク記法のカッコ違い `[text](url)`、(5) HTMLタグが混じっている（一部はDOMPurifyでサニタイズされる）。エディタ画面とプレビュー画面を見比べて記法ミスを修正してください。
XSS（クロスサイトスクリプティング）は安全ですか？
はい、本エディタは DOMPurify を使って HTML 出力時に危険なスクリプトタグや属性（`<script>`, `onclick`, `javascript:`）をすべて除去します。これにより、ユーザーがMarkdown中に悪意あるHTMLを書いても、プレビュー時に実行されることはありません。安全な可視化が保証されています。
入力データはサーバーに送信されますか？
いいえ、本エディタはすべての処理（Markdown→HTML変換、サニタイズ、プレビュー表示）をブラウザ内で完結させます。入力したテキストがst0z.comのサーバーや第三者に送信されることはなく、社外秘の文書、未公開の記事下書き、個人的な日記なども安全にお使いいただけます。
エディタの内容は保存されますか？
本エディタはブラウザのlocalStorageを利用して入力内容を自動保存しており、ブラウザを閉じて再度開いても内容が残ります。ただしブラウザのキャッシュをクリアすると消去されるため、重要な文書は外部にコピー＆ペーストして保存することを推奨します。クラウド保存・複数端末同期が必要な場合はNotion、HackMD、Obsidian Sync等をご検討ください。
よく使うMarkdown記法チートシート
| 書き方 | 表示結果 |
|---|---|
| # 見出し1 | 大見出し（h1） |
| ## 見出し2 | 中見出し（h2） |
| **太字** | 太字テキスト |
| *斜体* | イタリックテキスト |
| - リスト | 箇条書きリスト |
| 1. 番号リスト | 番号付きリスト |
| [テキスト](URL) | リンク |
| ```js コード``` | コードブロック |
| > 引用 | 引用ブロック |
| --- | 水平線 |