Markdown変換ツール

MarkdownをHTMLに変換し、入力と同時にプレビューを更新します

Markdown入力

0文字 / 0行

入力すると自動でHTMLに変換し、プレビューを更新します。「HTML変換」を押すと、その場で変換し直してプレビューを表示します。

プレビュー

Markdownを入力すると、ここにプレビューが表示されます

Markdownサンプル

変換統計

0
Markdown文字数
0
HTML文字数
0
行数
0
見出し数

Markdown変換ツールについて

入力と同時に変換

入力するとMarkdownをHTMLに変換し、プレビューを更新します

コードの色分け

```の後に言語名(javascript・python など)を書いたコードブロックを色分けします

拡張記法対応

表・取り消し線・チェックボックス(- [ ])・URLの自動リンク・脚注([^1])に対応します

HTML出力

変換したHTMLのコピーと、HTMLファイルの保存ができます

Markdown記法ガイド

見出し
# H1
## H2
### H3
強調
**太字**
*斜体*
`コード`
リスト
- 項目1
- 項目2
1. 番号付き
リンク・画像
[リンク](URL)
![画像](URL)

使用例

  • ドキュメント作成 - README、技術文書、マニュアルの作成
  • ブログ執筆 - Markdown形式でブログ記事を執筆
  • GitHub - GitHub Pages、Wikiの記事作成
  • 技術メモ - コード付きメモやナレッジベース

変換の仕様

  • GitHub形式(GFM)のMarkdownとして変換します。段落の中の1つの改行は改行として表示されません。改行したい行の末尾に半角スペースを2つ入れるか、空行で段落を分けてください。
  • コードの色分けは、```の後に言語名を書いたコードブロックだけに行います。対応する言語名は javascript(js)・typescript(ts)・python(py)・java・c・cpp・csharp(cs)・go・rust・php・ruby・kotlin・swift・sql・bash(sh)・shell・json・yaml・xml(html)・css・scss・less・markdown・diff・ini・makefile・perl・lua・r・graphql・objectivec・vbnet・wasm などです。言語名がない場合や対応していない言語名は色分けしません。
  • 脚注は本文に [^1]、別の行に [^1]: 脚注の本文 と書くと、本文の最後に番号付きでまとめて表示します。本文がない脚注の記号はそのまま表示します。
  • 見出しには、見出しの文字から作った id 属性が付きます(例:## 概要 → <h2 id="概要">)。
  • Markdownの中に書いたHTMLタグは、コピー・保存するHTMLにそのまま含めます。プレビューでは、script・style・iframe などの要素、onclick などのイベント属性、javascript: のリンクを取り除いて表示します。
  • プレビュー内の http・https のリンクは新しいタブで開きます。
  • 「HTMLコピー」は本文部分のHTMLだけをコピーします。「HTMLダウンロード」は、簡単なスタイルとコードの色分け用のスタイルを含むHTMLファイル(converted.html、UTF-8)を保存します。
  • 「ファイル読み込み」は .md・.markdown・.txt のファイル(5MBまで)をUTF-8のテキストとして読み込み、入力欄の内容を置き換えます。
  • 「Markdown文字数」と入力欄の下の文字数は、改行も1文字として数えます。見出し数は、コードブロックの中の「#」を除いた見出しの数です。
入力内容はサーバーへ送信しません

変換はブラウザ内で行い、入力したMarkdownをサーバーへ送信しません。ただし、Markdownに画像のURLを書いた場合は、プレビューで表示するためにその画像の配信元へ接続します。