Markdownプレビュー & HTML変換

Markdownプレビューの使い方

左ペインにMarkdownを入力すると、右ペインにリアルタイムでHTMLプレビューが表示されます。「HTMLコピー」でレンダリング済みHTMLを、「MDコピー」で整形済みMarkdownを取得できます。GFM（GitHub Flavored Markdown）の拡張記法 ─ テーブル・タスクリスト・打ち消し線・コードブロック ─ にも完全対応。画像は左ペインにドラッグ&ドロップするとBase64エンコードされて自動でMarkdownに埋め込まれ、単一のHTMLファイルとして配布できます。

画像をBase64で埋め込む使い方（メール共有）

左ペインの入力エリアに画像ファイル（PNG / JPEG / GIF / WebP / SVG）をドラッグ&ドロップすると、自動で data:image/png;base64,... 形式のMarkdown行が挿入されます。これによりHTMLにエクスポートすると、画像が外部ファイル参照ではなくHTML本体に埋め込まれた状態になります。メールにHTMLを貼り付ける、USBで配布する、社内Wikiに単一ファイルでアップロードするなど「画像を別途置けない」シーンで強力です。ただし1MB超の画像はファイルサイズが大きくなるため警告が表示されます。

目次（TOC）自動生成のカスタマイズ

「目次（TOC）を含める」をチェックすると、見出し（H1〜H6）から自動的に階層リンク付きの目次がプレビュー先頭に挿入されます。日本語見出しもURLエンコードされたアンカー（GitHub互換）として処理されるため、HTMLコピー時にそのままWebページの内部リンクとして機能します。アンカー名のかぶりは末尾に -2 -3 と通番が付与されます。

インラインCSS付きHTML — メール貼り付けの方法

エクスポート形式で「インラインCSS」を選んでから「HTMLコピー」を押すと、各HTML要素に style="..." 属性が直接付与された形でHTMLが取得されます。Gmailやoutlookなど、外部スタイルシートや <style> タグが効かないメール本文への貼り付けに最適。見出し・段落・テーブル・コードブロックなど主要要素のスタイルがすべて保持されます。

Markdown記法早見表

# 見出し1 / ## 見出し2 / ### 見出し3
**太字** _斜体_ ~~取り消し線~~ `コード`
- 箇条書き / 1. 番号付き
> 引用
[リンク](https://example.com)
![画像](url または D&Dで自動Base64)
---  (水平線)
```code
コードブロック
```

GFMで使える拡張記法

| 表 | 見出し |
|---|---|
| データ | データ |

- [x] 完了タスク
- [ ] 未完了タスク

~~取り消し線~~
URLは自動リンク化（https://example.com）

GFM（GitHub Flavored Markdown）はGitHubが拡張した記法で、テーブル・タスクリスト・打ち消し線・自動リンクなどが追加されています。Qiita / Zenn / Notion などのプラットフォームも概ねGFM準拠なので、このツールで書いた内容はそのまま貼り付け可能です。

Markdownとは / どんな場面で使う？

Markdownは、テキストファイルに簡単な記号（# や ** など）を書き加えるだけで、見出し・太字・リスト・リンクなどの装飾を表現できる軽量マークアップ言語です。WordやGoogleドキュメントのようにマウス操作で装飾する代わりに、キーボードだけで素早く整形できるため、ブログ記事・README・議事録・技術ドキュメント・メモなど幅広い用途で使われています。プレーンテキストなのでGitでバージョン管理しやすく、HTMLへの変換も簡単。エンジニア・ライター・学生・ビジネスパーソンまで、テキストを扱うすべての人に役立ちます。