Markdown と HTML を相互変換する

Markdown と HTML を相互変換する

Markdown を貼れば HTML に、HTML を貼れば Markdown になります。 書式を落としたプレーンテキストにもできます。 入力の形式は自動で判定し、違っていれば手で切り替えられます。 処理はすべてブラウザの中で行われ、貼り付けた文章がサーバーへ送られることはありません。

Markdown の基本的な書き方

Markdown は、記号で書式を表す記法です。 # を付ければ見出し、- を付ければ箇条書きになります。 覚えることが少なく、記号のままでも読めるのが利点です。

見出し

行頭に # を置きます。数を増やすと階層が下がり、6段階まであります。 # と文字の間には半角スペースが要ります。 これを忘れると見出しになりません。

# 大見出し
## 中見出し
### 小見出し

強調

アスタリスク2つで太字、1つで斜体になります。 アンダースコアでも同じですが、snake_case のような語の途中では 強調になりません。

**太字になる**
*斜体になる*
~~取り消し線~~

箇条書きと番号付き

行頭に - を置けば箇条書きです。 * や + でも同じ意味になります。 半角スペース2つ下げると入れ子になります。

- 項目
- 項目
  - 入れ子
    - さらに入れ子

1. 番号付き
2. 二つ目

番号付きは、始まりの番号が保たれます。 3. から書けば 3 から始まります。

リンクと画像

角括弧に文字、丸括弧に URL を書きます。 先頭に ! を付けると画像になり、角括弧の中は代替テキスト（alt）になります。

[リンクの文字](https://example.com)
![画像の説明](image.png)

コード

バッククォートで囲むと、その部分は記法として解釈されません。 3つ並べると複数行のコードブロックになり、開きの後ろに言語名を書けます。

文中の `コード` はそのまま出ます。

```js
const a = 1;
```

引用・表・水平線

> 引用
>
> > 入れ子の引用

| 左 | 中央 | 右 |
|:---|:---:|---:|
| a | b | c |

---

表の2行目がそれぞれの列の配置を決めます。 :--- が左寄せ、:---: が中央、---: が右寄せです。

改行

Markdown では、単に改行しただけでは改行になりません。 段落を分けるには空行を入れます。 段落の中で改行したい場合は、行末に半角スペースを2つ置きます。 これは見えないので、意図せず改行されない原因になりがちです。

HTML から Markdown に変換するときの注意

HTML のほうが表現できることが多いので、Markdown にすると必ず情報が落ちます。 何が落ちるかを知っておくと、変換後に慌てずに済みます。

• ほとんどの属性が落ちます — 残すのは href src alt title と、コードブロックの言語指定の class だけです。 id、style、レイアウト用の class は Markdown に書く場所がありません
• script style iframe object embed は中身ごと落ちます — 変換の対象ではなく、残しても意味がないためです
• div や span は残りますが、そのままの形で残ります — Markdown に対応する記法がないので、HTML のまま置いて警告を出します。消しはしません
• 表の結合セル（colspan / rowspan）は表せません — Markdown の表は格子状のみです
• 入れ子の表も表せません

落ちたものは警告として画面に出します。 黙って消すことはしないので、変換後に警告を確認してください。

このツールが対応する記法

次のものには対応していません。 入力に現れた場合はそのまま残し、警告を出します。 黙って落とすことはしません。

• HTML の生タグ（Markdown 中の div など）
• 脚注（[^1]）
• 定義リスト
• タスクリスト（- [ ]）
• 参照リンク（[text][ref]）
• 数式（$...$）
• フロントマター（--- で囲まれた YAML）

往復しても壊れない理由

Markdown を HTML にして、また Markdown に戻す。 この往復で表やコードブロックが崩れるツールは珍しくありません。 崩れる原因は、Markdown から HTML への変換を直接書いているからです。 記法の組み合わせは多く、変換の経路ごとに場当たりの処理が入ると、 どこかで辻褄が合わなくなります。

このツールは、いちど中間表現という形に直してから出力します。

Markdown ─┐              ┌─ HTML
          ├→ 中間表現 →┤
HTML     ─┘              ├─ Markdown
                         └─ プレーンテキスト

中間表現は「見出し・段落・リスト・表」といった文書の構造そのもので、 記法の情報を持ちません。 *強調* と _強調_ は同じものになり、 + 項目 と - 項目 も同じものになります。 読み込んだ時点で表記のゆれが消えるのが要点です。

出力するときは、それぞれの形式で1通りの書き方に決めて書き出します。 強調は必ず **、箇条書きは必ず -。 こうすると、もういちど読み込んでも同じ中間表現に戻ります。 往復が閉じることが、作りの上で保証されます。

そのかわり、元の書き方には戻りません。 _強調_ と書いたものは **強調** になって返ってきます。 これは崩れているのではなく、表記を揃えた結果です。 構造（見出しの階層、表の列、リストの入れ子、コードの中身）は変わりません。

このツールの使い方

1. 文章を貼り付ける。入力と同時に変換します
2. 入力の形式は自動で判定します。違っていれば「入力の形式」で切り替えてください
3. 出力の形式を HTML / Markdown / プレーンテキストから選びます
4. 「結果をコピー」でコピーします

HTML を選ぶと、実際に表示した状態のプレビューも出ます。 プレビューは表示する前に危険なタグと属性を取り除いています。 貼り付けた HTML に script や onclick が入っていても、 このページの中で動くことはありません。 出力欄の内容は取り除く前のものなので、コピーした結果には残ります。

プレーンテキストを選ぶと、リンクの URL を残すかどうかを選べます。 既定では文字だけを残します。 表はタブ区切りになるので、表計算ソフトにそのまま貼れます。

うまくいかない場合

• Markdown なのに HTML と判定される — 文中にタグが多いと HTML と見なします。「入力の形式」で切り替えてください
• 見出しにならない — # の後ろに半角スペースが要ります
• 意図しない位置で改行される／改行されない — 段落を分けるには空行、段落内の改行には行末の半角スペース2つが必要です
• 書き方が変わって返ってくる — 表記を1通りに揃えているためです（上記）。構造は変わっていません
• 10万文字を超える — 上限を10万文字にしています。見出しごとに分けて変換してください