Markdown
HTML
プレビュー
Markdown と HTML を双方向に変換できるツールです。「Markdown → HTML」では、見出し・段落・太字/斜体・リンク・画像・箇条書き(入れ子対応)・引用・コードブロック・GFM のパイプ表などをそのまま HTML に変換します。各見出しには自動でアンカー id が振られ、ボタン一つで目次(TOC)を入れ子の箇条書きとして本文先頭に挿入できるので、ブログ記事や README、社内ドキュメントの目次づくりがすぐ終わります。右側には変換後の HTML ソースが即時表示され、その下のプレビューで実際の見た目も確認できます。「HTML → Markdown」では、既存の Web ページや CMS の本文 HTML を貼り付けて、見出し・リスト・リンク・表・引用などを Markdown 記法へ書き戻せます。CMS から GitHub の README へ、Word から書いた HTML を Markdown へ移すときに便利です。入力は打つたびにリアルタイムで反映され、出力はワンクリックでコピーできます。原稿や下書きは社外秘や未公開の内容を含むことが多いため、本ツールは変換のすべてをあなたのブラウザの中だけで実行し、サーバーへアップロード・保存・送信は一切行いません。
使い方
- 上のツールバーで変換の向き(Markdown → HTML / HTML → Markdown)を選びます。
- 左の入力欄に Markdown(または HTML)を貼り付けます(「サンプル」で例を試せます)。Markdown → HTML では「目次(TOC)を挿入」「見出しに id を付与」を選べます。
- 右に変換結果が即時表示され、下のプレビューで見た目も確認できます。「コピー」で出力をコピー。入力はどこにも送信されません。
よくある質問
貼り付けた Markdown や HTML はアップロードされますか?
いいえ。変換も目次生成もプレビューも、すべてあなたのブラウザ内(JavaScript)で実行され、入力はサーバーへアップロード・保存・送信されません。社外秘の下書きや未公開の記事も安心して貼り付けられます。
目次(TOC)はどうやって作られますか?
本文中の見出し(#〜######)を順に拾い、それぞれにアンカー id を振ったうえで、レベルに応じた入れ子の箇条書きとして本文先頭に挿入します。同じ見出し名が複数あっても id を -1, -2 と一意化するので、目次リンクが正しく飛びます。「目次(TOC)を挿入」をオンにしてください。
見出しの id(アンカー)はどんな形式になりますか?
GitHub 風に、見出しテキストを小文字化し、記号を除いて空白をハイフンに置き換えた slug を id にします(例:「## はじめに」→ id="はじめに")。日本語の見出しもそのままアンカーにできます。id が不要なら「見出しに id を付与」をオフにできます。
どんな Markdown 記法に対応していますか?
見出し、段落、太字・斜体・打消し、インラインコードとコードブロック(```)、リンク・画像、箇条書き/番号付きリスト(入れ子)、引用、水平線、自動リンク、GFM のパイプ表に対応します。実務でよく使う記法を確実に往復させる方針で、脚注や独自拡張など一部の特殊記法は対象外です。
HTML → Markdown では何が戻せますか?
見出し・段落・太字/斜体・インラインコードとコードブロック・リンク・画像・箇条書き/番号リスト(入れ子)・引用・表・水平線・改行などを Markdown 記法に書き戻します。装飾用の class や script/style は落とします。複雑な独自レイアウトは完全には再現できないため、戻した後に軽く手直しすることをおすすめします。
変換した HTML はそのまま自分のサイトに貼れますか?
はい。出力はプレーンな HTML なので、ブログや CMS、静的サイトの本文にそのまま貼り付けられます。プレビューは確認用にこのツール側の見た目で表示しているだけで、コピーされるのはスタイルを含まない素の HTML です。