DevTools Japan トップへ

Markdownプレビュー

リアルタイムでMarkdownをプレビュー。HTMLコードも取得可能。

Markdown入力
プレビュー
HTML出力

Markdownプレビューツールの使い方

Markdown記法で書いたテキストをリアルタイムでHTML表示に変換する無料ツールです。GitHubのREADME作成、ブログ記事の下書き、技術ドキュメントの執筆など、Markdownを使う場面で即座にプレビューを確認できます。

対応するMarkdown記法

見出し(#)、太字・斜体、リスト(箇条書き・番号付き)、リンク、画像、コードブロック(シンタックスハイライト対応)、引用、テーブル、水平線、タスクリストに対応しています。GitHub Flavored Markdown(GFM)に準拠しています。

活用場面

GitHubのREADME.mdの作成、Qiita/Zennの技術記事の下書き、社内ドキュメントの執筆、プレゼン資料の原稿作成などに使われています。左側にMarkdownを入力すると、右側にリアルタイムでプレビューが表示されます。

Markdownとは

Markdown(マークダウン)は、テキストに記号を加えるだけで文書を装飾できる軽量マークアップ言語です。「#」や「*」といった少数の記号で見出し・太字・リスト・リンクなどを表現し、それを解析することでHTMLに変換します。プレーンテキストのまま読みやすく、書きやすいことが特徴で、HTMLタグを直接書くよりもはるかに少ない手間で構造化された文書を作成できます。

2004年にJohn Gruberによって考案され、その後GitHubが拡張した「GitHub Flavored Markdown(GFM)」が事実上の標準として広く普及しました。現在ではGitHubやGitLabのREADME、技術ブログ(Qiita・Zenn・noteなど)、各種ドキュメント、チャットツール、静的サイトジェネレーターまで、ソフトウェア開発から日常の文書作成まで幅広い場面で使われています。学習コストが低く、一度覚えればさまざまなサービスで同じ記法が通用するため、エンジニアにとって基本的なスキルとされています。

このツールでは、入力したMarkdownをブラウザ内でその場でHTMLへ変換し、左右のペインで原文とプレビューを見比べられます。変換結果のHTMLソースも取得でき、ブログの本文やサイトのコンテンツとして貼り付けて利用できます。入力内容はサーバーに送信されず、すべてお使いのブラウザ内だけで処理されます。

Markdown記法の早見表

このツールが対応している主な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>
![alt](url)画像の埋め込み<img src="url" alt="alt">
`コード`インラインコード<code>コード</code>
```コード```コードブロック<pre><code>…</code></pre>
> 引用引用ブロック<blockquote>引用</blockquote>
---水平線(区切り線)<hr>
| A | B |テーブル(表)<table>…</table>

ツールバーのボタンを使えば、選択した文字を太字・斜体・コードで囲んだり、行頭に見出し・リスト・引用・区切り線を挿入したりでき、記法を覚えていなくても手早く書けます。

よくある質問

Markdownをリアルタイムでプレビューできますか?
はい。左側の入力欄にMarkdownを書くと、入力するたびにその場でHTMLへ変換され、右側のプレビューに表示結果がリアルタイムで反映されます。ブログ執筆やREADME作成時に、仕上がりを確認しながら編集できます。
変換したHTMLをコピーして使えますか?
はい。ツールバーの「HTML表示」で変換後のHTMLソースを確認でき、「HTMLコピー」ボタンでクリップボードにコピーできます。コピーしたHTMLはブログやWebサイトの本文として貼り付けて利用できます。
対応している記法は?
見出し(# / ## / ###)、太字(**)、斜体(*)、箇条書きリスト(-)、番号付きリスト(1.)、リンク、画像、インラインコード(`)、コードブロック(```)、引用(>)、水平線(---)、テーブルに対応しています。GitHub Flavored Markdownの基本的な記法をカバーしています。
テーブルやコードブロックも書けますか?
はい。「| 見出し | 見出し |」のあとに区切り行「|---|---|」を続けるとテーブルになり、3つのバッククォート(```)で囲んだ範囲はコードブロックとして整形されます。どちらもプレビューに反映され、HTMLとして出力できます。
入力したテキストは送信されますか?
いいえ。Markdownの変換処理はすべてお使いのブラウザ内(JavaScript)で完結し、入力した内容がサーバーへ送信・保存されることはありません。登録不要・無料で安心してご利用いただけます。

関連ツール

HTML特殊文字変換ツール 文字数カウンター ダミーテキスト生成ツール
コピーしました