📝 Markdownオールインワン

1つのMarkdownを、この1画面で「編集 → ライブプレビュー → 目次(TOC)生成 → 表作成 → HTML変換」までまとめて扱えます。専用ツールを行き来する必要はありません。処理はすべてブラウザ内で完結し、入力内容はどこにも送信されません。

ここに書いたMarkdownが、下のタブすべての入力になります。目次や表は「本文に挿入」で、ここへ書き戻せます。

ライブプレビュー

本文を編集すると即座に反映されます。生のHTMLタグは文字として表示され、実行されません（XSS対策）。

解説

Markdownオールインワンは、Markdownにまつわる「よく使う作業」を1つの本文で束ねたツールです。編集・プレビュー・目次(TOC)生成・表作成・HTML変換は単体でも便利ですが、実際の執筆では本文を書きながら見出しから目次を作り、途中で表を差し込み、最後にHTMLとして書き出す、というように行き来しながら進めます。本ツールは中央のMarkdown本文を全機能で共有し、タブを切り替えるだけで同じ文章に各処理を適用できるので、コピー＆ペーストでツール間を往復する手間がありません。

プレビューは自前の軽量パーサでリアルタイムにHTML描画します。見出し・太字・斜体・取り消し線・インラインコード・箇条書き・番号リスト・引用・コードブロック・水平線・リンク・画像・GFMテーブルに対応。安全性を最優先し、まず入力全体をHTMLエスケープしてから限られた安全なタグだけを組み立てるため、本文に生の<script>を書いても実行されず、ただの文字として表示されます。リンクや画像のURLもjavascript:などの危険なスキームを弾きます。

目次生成はATX見出し（#〜######）を抽出し、GitHub式スラッグ（小文字化・記号除去・空白をハイフン・日本語はそのまま・重複は連番）でアンカー付きの目次を作ります。レベル範囲（例: H2〜H3のみ）や箇条書き／番号付きの切り替え、コードブロック内の#を無視するオプションを備え、生成した目次は本文の先頭に挿入できます。表作成は行・列を増減できる編集グリッドで、列ごとの寄せ（左/中央/右）を指定してGFM互換の表を出力し、CSV/TSVの貼り付け取り込みにも対応。完成した表は本文のカーソル位置へ差し込めます。

HTML変換は双方向です。「Markdown→HTMLソース」はプレビューと同じ安全なパーサでHTML文字列を書き出し、ブログやCMSに貼り付けられます。「HTML→Markdown」はDOMParserでHTMLを不活性に解析し、見出し・強調・リスト・引用・コード・リンク・画像・表などをMarkdownへ変換して本文に読み込めます。どの機能もネットワーク通信は行わずオフラインでも動作します。細かな記法の網羅性や特殊なオプションが必要な場合は、各専用ツール（Markdownプレビュー／目次生成／表作成／HTML→Markdown変換）も併せてご利用ください。

よくある質問

1画面でできることは何ですか？

中央のMarkdown本文を共有したまま、タブを切り替えて「ライブプレビュー」「見出しからの目次(TOC)生成」「編集グリッドでの表作成」「Markdown⇄HTMLの変換」を行えます。目次と表は本文へ挿入でき、HTMLから変換したMarkdownは本文に読み込めるので、ツール間のコピペ往復が不要です。

専用ツール（プレビュー／目次／表／HTML変換）との使い分けは？

1つの文章に対して複数の処理をまとめて行いたいときは本ツールが便利です。一方、その作業だけに集中したい・URLで直接共有したい・専用ツール固有の細かなオプションを使いたい場合は、各専用ツールが向きます。ロジック自体は各専用ツールと同じものを流用しています。

入力した内容はサーバーに送られますか？

送られません。プレビュー・目次・表・HTML変換のすべてがブラウザ内で完結し、外部通信やCDN読み込みは一切ありません。オフラインでも動作します。

生成した目次や表を文章に取り込むには？

目次タブの「本文の先頭に挿入」、表タブの「本文に挿入」を押すと、Markdown本文へ書き戻せます。表は本文のカーソル位置へ、前後に空行を確保した独立ブロックとして差し込まれます。コピーしてほかのエディタへ貼り付けることもできます。

どのMarkdown記法に対応していますか？

見出し（#〜######）、太字・斜体・取り消し線・インラインコード、箇条書き・番号リスト、引用、コードブロック（```）、水平線、リンク、画像、GFM形式のテーブルに対応します。脚注や数式などの拡張記法には対応していません。

HTMLタグを本文に書くとどうなりますか？

プレビューでは安全のため、本文中の生HTMLは実行されず「文字」として表示されます。まず入力全体をHTMLエスケープしてから、パーサが生成した限られたタグだけを描画する方式のためです。HTMLソースが欲しい場合は「HTML変換」タブでMarkdownからHTMLを書き出してください。

目次のレベルや番号付けは変えられますか？

はい。目次タブで対象とする見出しの最小・最大レベル（例: H2〜H3）を指定でき、「- 箇条書き」か「1. 番号付き」を選べます。コードブロック内に現れる#を見出しと誤認しないオプションも用意しています。

Excelやスプレッドシートの表を取り込めますか？

できます。表作成タブの取り込み欄にセルを貼り付けると、タブ区切り（TSV）またはカンマ区切り（CSV）として読み取り、編集グリッドへ反映します。CSVはダブルクォートのエスケープにも対応しています。