MarkdownをHTMLに変換する使い方

まずは3ステップで変換

アカウント登録やファイルのアップロードは不要です。MarkdownからHTML変換ページだけで、入力からHTMLの取得まで完了します。

1. 01

   Markdownを入力

   左側の入力欄へ貼り付けるか、そのまま文章を編集します。

2. 02

   自動変換を確認

   入力とほぼ同時に、右側のプレビューとHTMLが更新されます。

3. 03

   コピーまたは保存

   必要な形式に合わせてHTMLをコピーするか、ファイルを保存します。

# お知らせ

**重要**な更新です。

<h1>お知らせ</h1>
<p><strong>重要</strong>な更新です。</p>

変換結果を見やすく確認する

右側の出力欄は、完成イメージとソースコードを切り替えられます。長い文章は拡大表示、左右の幅は境界線のドラッグで調整できます。

フォント、文字色、蛍光ペンを変更する

プレビュー内の文字を選択すると、Officeのようなミニツールバーが選択位置の近くに表示されます。フォントの変更・元のフォントに戻す操作、文字色、蛍光ペンを選べます。

1. 1「プレビュー」タブで変更したい文字を選択します。
2. 2上段でフォントの変更または元のフォントに戻す操作、中段で文字色、下段で蛍光ペンの色または解除を選びます。
3. 3変更はHTMLソース、コピー、ダウンロード結果にも反映されます。

Mermaidフローチャートを表示する

mermaidコードブロックの先頭にflowchartまたはgraphを記述すると、右側のプレビューへ図として表示されます。別の操作やアップロードは必要ありません。

```mermaid
flowchart LR
  A[Markdownを入力] --> B{内容を確認}
  B -->|OK| C[HTMLを取得]
```

1. 1コードフェンスの言語名にmermaidを指定します。
2. 2先頭行へflowchart LRなどの向きを記述し、ノードを矢印でつなぎます。
3. 3プレビューを確認し、必要に応じてHTMLをコピーまたはダウンロードします。

用途に合わせてHTMLを取り出す

CMSやブログへ貼り付ける場合と、ブラウザで開けるファイルとして保存する場合で、使うボタンが異なります。数式とフローチャートのSVGも出力に含まれます。

対応記法を入力例で確認する

基本のMarkdownに加えて、GitHub Flavored Markdown、脚注、折りたたみ、LaTeX形式の数式、Mermaidフローチャートを変換できます。

安全性と画像URLについて

変換はブラウザ内で完結します。一方、ネットワーク画像を表示するときは、画像の配信元へブラウザから直接アクセスします。