Markdown→HTML変換
README やメモを Markdown で書いて、ブログや社内ページに貼る HTML が欲しいときに。入力した瞬間にプレビューが更新されます。
🔒 入力内容はお使いのブラウザ内だけで処理され、サーバーには送信されません。
Markdown を入力すると、ここにプレビューが出ます。
使い方
- 上の欄に Markdown を入力するか、貼り付けます。書き方が分からなければ「サンプルを入れる」で一通りの記法を確認できます。
- 入力すると同時に、下の「プレビュー」に変換結果が表示されます。
- 「HTML ソース」タブに切り替えると、変換後の HTML が見られます。「HTML をコピー」でクリップボードへコピーできます。
- ファイルとして欲しいときは「.html をダウンロード」を押します。ダウンロードするファイルは、ブラウザでそのまま開ける完全な HTML 文書になります。
変換の決まり
| 記法 | 変換結果 |
|---|---|
# 見出し 〜 ###### 見出し |
<h1> 〜 <h6> |
| 空行で区切った文章 | <p> の段落。1つの改行は段落の続き(「改行をそのまま改行にする」をオンにすると <br>) |
**太字** *斜体* ~~取り消し~~ |
<strong> <em> <del> |
- 項目 1. 項目 |
<ul> <ol> のリスト。スペース2つで入れ子 |
- [ ] 項目 - [x] 項目 |
チェックボックス付きのリスト(GFM) |
`コード` と ``` のブロック |
<code> と <pre><code>。言語名は class="language-js" として付きます |
\| 列 \| 列 \| と \|---\|---\| |
<table>(GFM)。:--- :---: ---: で左・中央・右寄せ |
[文字](URL)  |
<a> <img> |
> 引用 |
<blockquote> |
--- |
<hr> |
| HTML タグ | そのまま残します。ただし下の「注意」の要素・属性は除去 |
変換には marked(オープンソースのライブラリ)を使っています。
こんな時に
- GitHub の README を社内の Wiki やブログに移すとき
- メモアプリで Markdown で書いた文章を、HTML しか受け付けない CMS に貼るとき
- Markdown の表の書き方が合っているか、プレビューで確認したいとき
- 簡単な HTML ページを、タグを手書きせずに作りたいとき
注意
Markdown の中に HTML を書ける仕様のため、他人から受け取った Markdown には危険なコードが含まれている可能性があります。このツールでは、プレビューと出力の両方で <script>、<iframe>、<object>、<embed>、<style>、<form> などの要素、onclick などの on で始まる属性、javascript: で始まる URL を取り除いています。取り除いた数は下の数値に出ます。それでも、出力した HTML を公開サイトに載せる前には内容を確認してください。
よくある質問
表(テーブル)が変換されません
GFM 形式の表は、見出し行の次に |---|---| の区切り行が必要です。また、表の前の行は空行にしてください。行の先頭と末尾の | は省略できますが、列の数は各行でそろえてください。
改行したのに1行につながってしまいます
標準の Markdown では、1つの改行は同じ段落の続きとして扱われ、空行で段落が分かれます。行末の改行をそのまま <br> にしたい場合は「改行をそのまま改行にする」をオンにしてください。
Markdown の中に書いた HTML タグはどうなりますか?
<b> や <span> のような通常のタグはそのまま残ります。ただし <script>、<iframe>、onclick などの属性、javascript: で始まるリンクは、安全のためプレビューと出力の両方から取り除きます。
ダウンロードした .html をそのまま公開できますか?
「完全な HTML 文書として出力」をオンにすると、<!DOCTYPE html> から </html> までと最小限のスタイルを付けたファイルになり、そのままブラウザで開けます。オフの場合は <body> の中身だけの断片です。既存のサイトに貼り込むときは断片の方が扱いやすいです。