Markdownプレビュー
Markdownの原文と表示結果を並べて確認し、HTML保存やPDF印刷ができます。入力内容はサーバーに送信しません。
ツールを準備しています。
ユーザーの評価
まだレビューはありません。このツールを使ったことがあれば、最初のレビューを書いてください。
Markdownプレビューの詳しい使い方ガイド
使い方と例を確認し、知りたいことはトピックから探せます。
はじめに確認すること
- 対応する構文
- 見出し・強調・取り消し線・リスト・番号付きリスト・チェックボックス・引用・表・コード・リンク・画像。
- 安全な処理
- 文書内のHTMLやスクリプトを実行せず、文字として表示します。
- リンクの検査
- javascript: のようなアドレスはリンクにしません。
- HTMLの書き出し
- 特殊文字をエスケープした断片を作ります。
- 目次
- 見出しが2つ以上あると自動で作ります。
- 統計
- 文字・単語・行・見出しの数と、おおよその読む時間。
- サイズの制限
- 200,000文字・20,000行まで。
- 処理する場所
- 文書をサーバーに送らず、このブラウザの中だけで扱います。
Markdownプレビューの使い方
左側にMarkdownを書いてください
直接書いても、ほかの場所からコピーして貼り付けても構いません。最初はサンプルの文書が入っているので、構文をすぐに確認できます。
右側で結果を見てください
書くとすぐに反映されます。見出しが2つ以上あると、上に目次ができて、文書の構造をひと目で確認できます。
HTMLに変換してみてください
HTMLタブに切り替えると、そのまま貼り付けて使える断片が表示されます。特殊文字はエスケープされているので、崩れません。
コピーまたは保存してください
原文は.mdで、結果は.htmlで保存できます。コピーボタンで、クリップボードにそのまま入れることもできます。
こんな作業に使えます
他人から受け取った文書も安全に開けます
プレビューを作るときに、HTMLの断片を画面に差し込む方式だと、文書にスクリプトが混じっていた場合、それが実行されてしまうことがあります。このツールは、文書を構造として読み取ってから、画面の要素として直接描画するので、文書内のタグやスクリプトは文字としてしか表示されません。javascript: のようなアドレスはリンクにせず、文字だけを残します。
文書を把握するための情報も一緒に表示します
見出しが複数あれば目次を作って文書の構造をひと目で示し、文字数・単語数・行数とおおよその読む時間も数えます。HTMLに書き出すときは、特殊文字をエスケープして、そのまま貼り付けても崩れない断片を作ります。
例で結果を確かめる
表の配置
| 項目 | 担当 | 期限 |
| --- | :-: | --: |中央揃えと右揃えが適用された表文書にスクリプトが混じっている場合
<script>alert(1)</script><script>alert(1)</script>（文字として表示）プレビューを作る2つの方式
表を左右にスクロールすると続きが見られます。
| 方式 | 文書内のスクリプト | このツール |
|---|---|---|
| HTMLの断片を画面に差し込む | 実行されることがある | 使いません |
| 構造として読み取り、要素として描画する | 文字としてしか表示されない | この方式を使います |
| HTMLに書き出す | エスケープして安全な断片にする | コピーと保存に使います |
結果が思ったとおりにならないとき
改行が消えます
このツールは、段落の中の改行をそのまま残します。ほかの場所に貼り付けて消える場合は、そちらが空行だけで段落を分ける方式なのかもしれません。
表が表として表示されません
見出し行のすぐ下に --- の区切り線がないと、表として読み取りません。区切り線が抜けていないか確認してください。
リンクをクリックしても開きません
javascript: のような危険なアドレスは、あえてリンクにしていません。httpで始まるアドレスかどうか確認してください。
文書が長すぎると表示されます
200,000文字を超えています。章ごとに分けて確認してください。
知っておきたい用語
- Markdown
- いくつかの記号で文書の書式を書く方式です。読みやすい原文のまま使えます。
- エスケープ
- < や & のような文字を、HTMLで安全な表記に変える処理です。
- コードブロック
- ``` を3つ並べて囲んだ部分です。中身は構文として読み取りません。
- 目次
- 文書の見出しだけを集めて、構造を示す一覧です。
Markdownプレビューのよくある質問
どの構文に対応していますか？
見出し・太字・斜体・取り消し線・リスト・番号付きリスト・チェックボックス・引用・表・コードブロック（構文ハイライト）・リンク・画像・脚注・数式（$…$、$$…$$）に対応しています。
文書はサーバーにアップロードされますか？
アップロードされません。読み取りと描画の過程はすべて、このブラウザの中で行います。
表の配置も指定できますか？
できます。区切り線にコロンを入れて、左・中央・右揃えを指定でき、プレビューと書き出したHTMLの両方に反映されます。
数式も使えますか？
使えます。$E=mc^2$ のように $ を1組で囲むと文中の数式、$$ で囲んだ行は中央揃えの数式ブロックになります。$5 と $10 のように、数字で始まってあけて書いた金額表記は、数式として読み取りません。脚注は [^1] で付け、文書の下に [^1]: 内容 と書いてください。
作成されたHTMLをそのまま使ってもよいですか？
使えます。特殊文字をエスケープし、危険なアドレスを取り除いた断片なので、ブログや文書作成ツールに貼り付けて使えます。
表の中で太字は使えますか？
使えます。表のセルの中でも、太字・斜体・コード・リンクを使えます。