リアルタイムでMarkdownをプレビュー。HTMLコードも取得可能。
Markdown記法で書いたテキストをリアルタイムでHTML表示に変換する無料ツールです。GitHubのREADME作成、ブログ記事の下書き、技術ドキュメントの執筆など、Markdownを使う場面で即座にプレビューを確認できます。
見出し(#)、太字・斜体、リスト(箇条書き・番号付き)、リンク、画像、コードブロック(シンタックスハイライト対応)、引用、テーブル、水平線、タスクリストに対応しています。GitHub Flavored Markdown(GFM)に準拠しています。
GitHubのREADME.mdの作成、Qiita/Zennの技術記事の下書き、社内ドキュメントの執筆、プレゼン資料の原稿作成などに使われています。左側にMarkdownを入力すると、右側にリアルタイムでプレビューが表示されます。
Markdown(マークダウン)は、テキストに記号を加えるだけで文書を装飾できる軽量マークアップ言語です。「#」や「*」といった少数の記号で見出し・太字・リスト・リンクなどを表現し、それを解析することでHTMLに変換します。プレーンテキストのまま読みやすく、書きやすいことが特徴で、HTMLタグを直接書くよりもはるかに少ない手間で構造化された文書を作成できます。
2004年にJohn Gruberによって考案され、その後GitHubが拡張した「GitHub Flavored Markdown(GFM)」が事実上の標準として広く普及しました。現在ではGitHubやGitLabのREADME、技術ブログ(Qiita・Zenn・noteなど)、各種ドキュメント、チャットツール、静的サイトジェネレーターまで、ソフトウェア開発から日常の文書作成まで幅広い場面で使われています。学習コストが低く、一度覚えればさまざまなサービスで同じ記法が通用するため、エンジニアにとって基本的なスキルとされています。
このツールでは、入力したMarkdownをブラウザ内でその場でHTMLへ変換し、左右のペインで原文とプレビューを見比べられます。変換結果のHTMLソースも取得でき、ブログの本文やサイトのコンテンツとして貼り付けて利用できます。入力内容はサーバーに送信されず、すべてお使いのブラウザ内だけで処理されます。
このツールが対応している主なMarkdown記法と、その意味・HTML出力の対応を示します。記号の左右にスペースが必要なもの(見出し・リスト・引用など)に注意してください。
| 記法 | 意味 | 変換されるHTML |
|---|---|---|
| # 見出し | 大見出し(レベル1) | <h1>見出し</h1> |
| ## 見出し | 中見出し(レベル2) | <h2>見出し</h2> |
| ### 見出し | 小見出し(レベル3) | <h3>見出し</h3> |
| **太字** | 太字(強調) | <strong>太字</strong> |
| *斜体* | 斜体(イタリック) | <em>斜体</em> |
| - 項目 | 箇条書きリスト | <ul><li>項目</li></ul> |
| 1. 項目 | 番号付きリスト | <li>項目</li> |
| [リンク](url) | ハイパーリンク | <a href="url">リンク</a> |
|  | 画像の埋め込み | <img src="url" alt="alt"> |
| `コード` | インラインコード | <code>コード</code> |
| ```コード``` | コードブロック | <pre><code>…</code></pre> |
| > 引用 | 引用ブロック | <blockquote>引用</blockquote> |
| --- | 水平線(区切り線) | <hr> |
| | A | B | | テーブル(表) | <table>…</table> |
ツールバーのボタンを使えば、選択した文字を太字・斜体・コードで囲んだり、行頭に見出し・リスト・引用・区切り線を挿入したりでき、記法を覚えていなくても手早く書けます。