Markdown エディタ
Markdownとは？
Markdownは、2004年にJohn Gruberによって作成された軽量マークアップ言語です。シンプルなテキストフォーマット構文を使用し、構造化されたHTMLに変換できます。Markdownはドキュメント、ブログ記事、READMEファイルの作成に広く使用されており、そのシンプルで読みやすいフォーマットから開発者に愛されています。
使い方
使い方
- 左側のエディタにMarkdownテキストを入力します
- 右側のパネルにリアルタイムのプレビューが表示されます
- ツールバーのボタンで一般的な構文を挿入できます
- 下部バーに単語数・文字数・行数が表示されます
- コンテンツはブラウザのローカルストレージに自動保存されます
機能
編集のヒント
- プレビュー表示はプラットフォームによって異なるため、表・HTML・拡張Markdown機能を使う場合は、最終出力先のシステムで確認してください。
- 自動保存は下書きに便利ですが、ブラウザのデータを消去する前やデバイスを切り替える前には、重要なメモのバックアップを別途保存してください。
利用シーン
仕組み
Markdownのレンダリングは通常3つのステップで構成されます。まずトークナイザーがテキストを見出し、段落、リスト、コードブロックなどの構文単位に分割し、次にパーサーがトークンストリームを文法規則に従って抽象構文木（AST）に変換し、最後にレンダラーがASTを走査して対応するHTMLを出力します。代表的なJavaScriptライブラリにはmarked、markdown-it、remark、micromarkがあり、バンドルサイズ、速度、拡張性は異なりますが、いずれもCommonMark仕様に従います。 CommonMarkは元のMarkdown文法の曖昧さ（ネストリストのインデント方法やインラインコードの境界の見つけ方など）を解決し、異なる実装が同じ結果をレンダリングできるようにしました。CommonMarkの上にGitHubがGFM（GitHub Flavored Markdown）を追加しました。GFMはテーブル、タスクリスト（- [ ]）、取り消し線（~~）、自動リンク、フェンス付きコードブロックを追加し、現在では事実上の標準となっています。ほとんどの現代的なMarkdownツールはデフォルトでGFMを有効にしています。 コードブロックのシンタックスハイライトは通常highlight.jsまたはPrism.jsで行われ、レンダリング時に言語タグを認識してキーワード、文字列、コメントにCSSクラスを付与し、テーマが色を適用します。ユーザーが提供したHTMLによるXSSを防ぐため、レンダラーは出力をDOMPurifyや同様の許可リストフィルターに通し、script、iframe、on*イベント属性を除去します。これにより、他人のMarkdownを貼り付けても悪意あるスクリプトが実行されることはありません。
- 解析フロー：生テキストはTokenizer → Parser → Rendererを経てHTMLとなり、ASTが中間表現として使用されます。
- 標準：CommonMarkが公式文法であり、GFMはそれにテーブル、タスクリスト、取り消し線、フェンス付きコードブロック、自動リンクを追加拡張します。
- ライブラリ比較：markedは小型で高速、markdown-itは豊富なプラグイン生態系を持ち、remarkはunified生態系上にありドキュメント処理パイプラインに適しています。
- シンタックスハイライト：highlight.jsまたはPrism.jsがコードブロックの言語タグを解析時に読み取り、キーワード、文字列、コメントにCSSクラスを付与します。
- XSS対策：DOMPurifyなどのライブラリが出力HTMLを許可リストでフィルタリングし、script、iframe、on*イベント属性を除去してスクリプト注入を防ぎます。
- ライブプレビュー：エディタは入力イベントをリッスンし、各変更をデバウンスして再解析し、diffで右側のDOMを更新することで応答性とパフォーマンスのバランスを取ります。
使用例
見出し、リスト、コードブロック
# 見出し 1
## 見出し 2
- リスト項目 A
- リスト項目 B
- ネストされた項目
```javascript
function hello() {
console.log('Hello Markdown');
}
```テーブル
| ツール | 種類 | サイズ |
|---------|--------|------|
| Vite | Build | 小 |
| Webpack | Build | 大 |
| Rollup | Bundle | 中 |引用とリンク
> 「Markdown は執筆をコンテンツそのものに立ち返らせる。」
> -- John Gruber
参考: [CommonMark Spec](https://commonmark.org)よくある質問
対応しているMarkdownの方言はどれですか？
ほとんどのビルドはCommonMarkに加えて、GitHub Flavored Markdownの拡張（テーブル、取り消し線、タスクリスト、言語ヒント付きフェンス付きコードブロック）に対応しています。$math$ブロック用のMathJax/KaTeX、図表用のMermaidを含むものもあります。利用可能な機能はツールバーで確認してください。
ドキュメントはアップロードされますか？
いいえ。Markdownの解析とレンダリングは、JSライブラリ（一般的にmarkdown-itまたはremark）を使用してブラウザ内で行われます。下書きがデバイスから外に出ることはありません。
ライブプレビューはどのように動作しますか？
入力するたびにソース側のペインが解析され、プレビュー側のペインにHTMLとしてレンダリングされます。スクロール同期は段落の位置を一致させて2つのペインを揃えます。ほとんどのビルドはフルスクリーンや左右並列表示の切り替えにも対応しています。
ドキュメントをエクスポートできますか？
はい。.md（生のソース）、HTML（レンダリング済み、Webページに埋め込み可能）、PDF（ブラウザの印刷エンジンで出力）として保存できます。PDF出力では見出し、リスト、コードブロック、埋め込み画像が保持されます。ピクセル単位で正確なPDFが必要な場合は、HTMLを実際のワードプロセッサに貼り付けてください。
タブを閉じても下書きは保存されますか？
ほとんどのビルドはlocalStorageに自動保存するため、同じブラウザで再度開けば下書きが復元されます。プライベートウィンドウを閉じたりサイトデータを消去すると消えます。確実な保存のためには、定期的に.mdファイルとしてファイルシステムやgitリポジトリにエクスポートしてください。
画像を貼り付けるとアップロードされますか？
一部のエディタは貼り付けた画像をインラインのbase64として保存します（Markdownソース内に表示されます）。他のエディタは画像ホストにアップロードします。ページの動作を確認してください。プライバシーが重要な場合は、まず画像をファイルシステムに保存し、相対パスで参照することをおすすめします。
テーブル、数式、図表を挿入できますか？
GitHub Flavored Markdownのテーブル（| col1 | col2 |）はどこでも動作します。数式ブロック（$x^2$）やMermaid図（```mermaid）は明示的なサポートが必要です。ツールバーにボタンがあるか確認してください。対応している場合、プレビューにライブで描画されます。