Markdown エディター

左に入力すると、右に描画結果が表示されます。ボタン操作もアップロードも不要です。

Markdownプレビュー

描画結果がここに表示されます。

使い方

  1. 左の欄に Markdown を入力するか貼り付けてください。右のプレビューが入力と同時に更新されます。描画ボタンはありません。
  2. 「改行 1 つを新しい行として扱う」は既定ではオフです。CommonMark の仕様どおり、単独の改行は空白として扱われます。すべての改行で行を変えたいときにオンにしてください。
  3. CMS やブログ向けに HTML をコピーするか、.md / .html ファイルをダウンロードします。3 つの出力はすべてプレビューと同じ解析結果から作られます。

例

入力(Markdown)

## ローカルだけで完結

**太字**、`コード`、そして[リンク](https://example.com)。

- アップロードされません

| 形式 | バイト |
| --- | ---: |
| .md | 128 |

出力(コピーされる HTML)

<h2 dir="auto">ローカルだけで完結</h2>
<p dir="auto"><strong>太字</strong>、<code>コード</code>、そして<a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">リンク</a>。</p>
<ul><li dir="auto">アップロードされません</li></ul>
<table><thead><tr><th dir="auto">形式</th><th dir="auto" class="md-align-end">バイト</th></tr></thead><tbody><tr><td dir="auto">.md</td><td dir="auto" class="md-align-end">128</td></tr></tbody></table>

上の HTML は「HTML をコピー」でクリップボードに入る内容そのものです。プレビューと同じ解析結果を使い、テキストは埋め込まずエスケープして出力します。

ルール・制限・既知の問題

  • 対応: 見出し(# と ===)、段落、太字・斜体・取り消し線、インラインコード、フェンス付きコードブロック、リンク、画像、引用、番号付き・番号なし・タスクのリスト、GFM の表、水平線、自動リンク。
  • 非対応: 4 スペースインデントのコードブロック、参照リンク、脚注、定義リスト、生の HTML ブロック、HTML エンティティ、数式(KaTeX)、Mermaid 図、絵文字ショートコード、シンタックスハイライト、目次、同期スクロール。
  • 生の HTML は実行しません。<div>、<script>、<img onerror=…> は文字として表示されます。そのため既存の HTML 断片をここでプレビューすることはできません。
  • リンクとして残すのは http、https、mailto、tel、#アンカーだけです。javascript:、data:、vbscript: の URL は取り除き、リンクの文字だけを残します。画像は http / https のみ受け付けます。
  • リモート画像はブラウザが読み込み、そのアドレスへリクエストを送ります(no-referrer)。画像の URL 自体が機密なら、文書に含めないでください。
  • これは実用的なサブセットであり、完全な CommonMark / GFM ではありません。深いネスト、表のコードスパン内の |、リストのインデント、複数行の Setext 見出しは GitHub と異なる表示になることがあります。
  • ネストは 8 階層までです(引用、リスト、インライン)。それより深い内容はプレーンテキストとして表示し、悪意ある入力でページが固まらないようにします。
  • 10 万文字まではリアルタイムに更新し、それを超えると入力が止まって約 0.5 秒後にプレビューが更新されます。切り捨ては行いません。
  • 書き出した .html は、シンプルな組版でシンタックスハイライトのない自己完結の静的ページです。印刷・PDF 向けのレイアウトではなく、PDF や Word への書き出しはありません。
  • 何も保存しません。アカウント、下書き、履歴、URL パラメータはありません。タブを閉じるとテキストは失われます。

Markdown を書き終えたあとによく使われるツールです。