Markdown プレビュー

Markdown テキストをリアルタイムで HTML としてレンダリングしてプレビュー

サンプルを試す

Markdown

プレビュー

ローカルで実行 · シークレットの貼り付けも安全

ここにプレビューが表示されます…

ローカルで実行 · シークレットの貼り付けも安全

ここにプレビューが表示されます…

こちらもどうぞ：単語数・文字数カウンターテキストケース変換 Lorem Ipsum ジェネレーター Line Sorter 重複行削除ツールテキスト差分ツール正規表現テスターパスワード生成器スラグ生成器

Markdown とは？

Markdown は、2004年に John Gruber が作成した軽量マークアップ言語です。アスタリスク、ハッシュ、ハイフンなどのプレーンテキスト記号を使って、見出し、太字、斜体、リスト、リンク、コードブロックといった構造を表現します。Markdown プレビュアーはそのプレーンテキストを整形された HTML に変換し、公開前に最終的な文書の見た目を正確に確認できます。元の Markdown 仕様は Gruber の Daring Fireball ドキュメントで解説されており、その後 CommonMark として標準化されています。

Markdown は、開発者向けドキュメント、README ファイル、静的サイトジェネレーター（Jekyll、Hugo、Astro）、Wiki、ナレッジベースのデフォルト記述フォーマットになっています。GitHub、GitLab、Bitbucket、Stack Overflow、Reddit、Notion はすべて Markdown をネイティブサポートしています。ソースがプレーンテキストであるため、Markdown ファイルは Git でのバージョン管理、ブランチ間の差分確認、ファイル内の重複しない箇所のマージが容易です。

Markdown プレビューツールは入力をパースしてリアルタイムで HTML に変換します。これにより、ファイルをコミットしたりページを公開したりする前に、フォーマットのエラー、リンク切れ、予期しないネスト構造を発見できます。このプレビュアーはブラウザ内で完全に動作し、サーバーへの通信が不要なため、機密性の高いドキュメントを安全に扱えます。

オンライン Markdown プレビュアーを使う理由

プレビューなしのプレーンエディターで Markdown を書くと、出力を推測しながら作業することになります。ライブプレビュアーはそのフィードバックループを即座に解消します。

⚡

リアルタイムレンダリング

入力しながら整形済みの出力を確認できます。見出し、リスト、コードブロック、リンクがすべて即座にレンダリングされるため、ミスをその場で発見できます。

🔒

プライバシー優先の処理

すべてのパース処理はブラウザ内で行われます。Markdown テキストがサーバーにアップロードされることはなく、社内ドキュメント、サンプル中の API キー、下書きのブログ記事を安全に扱えます。

📝

アカウント登録・インストール不要

ページを開いてすぐに入力できます。サインアップフォーム、ダウンロードするデスクトップアプリ、設定が必要な VS Code 拡張機能は一切不要です。ブラウザがあればどのデバイスでも動作します。

🌐

完全な CommonMark サポート

見出し、太字、斜体、取り消し線、インラインコード、フェンスコードブロック、順序付き・順序なしリスト、リンク、引用、水平線がすべてサポートされています。

Markdown プレビューのユースケース

コンポーネントドキュメントを書くフロントエンド開発者

GitHub にプッシュする前に README ファイルやコンポーネントドキュメントをプレビュー。コード例がフェンスブロック内で正しくレンダリングされ、相対リンクが正しいファイルを指しているか確認できます。

API ドキュメントを作成するバックエンドエンジニア

エンドポイントの説明、リクエスト・レスポンスの例、認証ガイドを Markdown で記述。JSON コードブロック、テーブル、ネストされたリストが意図通りに表示されるかレンダリング結果をプレビューで確認できます。

ランブックを管理する DevOps エンジニア

Git リポジトリに Markdown で保存されたランブックやインシデントプレイブックは正確なフォーマットが必要です。マージ前に番号付きリストとコードスニペットを含む手順をプレビューできます。

テスト計画を作成する QA エンジニア

テストシナリオ、受け入れ基準、バグレポートを Markdown で文書化。チェックリスト、見出し、相互参照がきれいにレンダリングされているかプレビュアーで確認できます。

パイプラインをドキュメント化するデータエンジニア

パイプラインの README にはスキーマ、DAG の依存関係、設定が記述されています。インラインコード、フェンスされた SQL ブロック、番号付きセットアップ手順が正しくフォーマットされているかドキュメントをプレビューできます。

Markdown 構文を学ぶ学習者

左側に Markdown を入力し、右側で HTML の結果を確認。見出し、リスト、太字、斜体、コードブロックを試して構文の感覚を身につけられます。

Markdown 構文リファレンス

以下の表は一般的な Markdown 構文をレンダリング結果と対応する HTML 要素にマッピングしています。ほぼすべての Markdown パーサーがサポートする CommonMark の基本構文を網羅しています。

Markdown	レンダリング結果	HTML タグ
# Heading	Heading 1	<h1>
## Heading	Heading 2	<h2>
bold	Bold text	<strong>
italic	Italic text	<em>
~~strike~~	Strikethrough	<del>
`code`	Inline code	<code>
```lang\n...\n```	Fenced code block	<pre><code>
- item	Unordered list	<ul><li>
1. item	Ordered list	<ol><li>
[text](url)	Hyperlink	<a href>
> quote	Blockquote	<blockquote>
---	Horizontal rule	<hr>

Markdown フレーバーの比較

各プラットフォームは元の Markdown 仕様を拡張して追加機能を提供しています。対象のフレーバーを把握しておくことで、別のレンダラーでは動作しない構文の使用を避けられます。

GitHub Flavored Markdown (GFM)

タスクリスト（- [ ] / - [x]）、パイプ構文のテーブル、取り消し線（~~text~~）、URL の自動リンクが追加されています。GitHub のイシュー、プルリクエスト、README ファイルで使用されるフレーバーです。CommonMark をベースに構築された GitHub Flavored Markdown Spec として仕様が定められています。

CommonMark

元の Markdown 構文を厳密かつ明確に定義した仕様です。CommonMark はネストされたリスト、遅延継続行、ブロッククォート内の空行といったエッジケースの正確なルールを定めています。最新のパーサー（marked、markdown-it、goldmark）の多くは CommonMark をデフォルトとしています。

MultiMarkdown (MMD)

脚注、引用キー、数式（LaTeX）、定義リスト、ドキュメントメタデータで Markdown を拡張します。主に学術的な執筆や PDF・LaTeX にエクスポートする長編ドキュメントで使用されます。

MDX

Markdown ファイル内に JSX コンポーネントを直接埋め込めます。Docusaurus、Nextra、Astro コンテンツコレクションなどのドキュメントフレームワークで使用されます。MDX ファイルはビルド時に React コンポーネントにコンパイルされます。

コード例：Markdown をプログラムでレンダリングする

ブラウザツールではなくアプリケーション内で Markdown をレンダリングする必要がある場合は、以下のライブラリを使用してください。各例は Markdown 文字列を HTML 文字列に変換します。

JavaScript (marked)

import { marked } from 'marked'

const md = '# Hello\n\nThis is **Markdown**.'
const html = marked(md)
// → "<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>\n"

// With options
marked.setOptions({ gfm: true, breaks: true })
const gfmHtml = marked('Line one\nLine two')
// → "<p>Line one<br>Line two</p>\n"

Python (markdown)

import markdown

md = '# Hello\n\nThis is **Markdown**.'
html = markdown.markdown(md)
# → '<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>'

# With extensions
html = markdown.markdown(md, extensions=['fenced_code', 'tables'])

# Convert a file
with open('README.md') as f:
    html = markdown.markdown(f.read(), extensions=['extra'])

Go (goldmark)

package main

import (
	"bytes"
	"fmt"
	"github.com/yuin/goldmark"
)

func main() {
	source := []byte("# Hello\n\nThis is **Markdown**.")
	var buf bytes.Buffer
	if err := goldmark.Convert(source, &buf); err != nil {
		panic(err)
	}
	fmt.Println(buf.String())
	// → <h1>Hello</h1>
	// → <p>This is <strong>Markdown</strong>.</p>
}

CLI (pandoc)

# Convert Markdown file to HTML
pandoc README.md -f markdown -t html -o output.html

# Convert with GitHub Flavored Markdown
pandoc README.md -f gfm -t html --standalone -o output.html

# Pipe from stdin
echo '# Hello **world**' | pandoc -f markdown -t html
# → <h1>Hello <strong>world</strong></h1>

よくある質問

Markdown と HTML の違いは何ですか？

Markdown は HTML に変換されるプレーンテキストの簡略記法です。<h1>見出し</h1> の代わりに # 見出しと書きます。Markdown は記述が速くソース形式でも読みやすいですが、HTML はすべての要素と属性を細かく制御できます。ほとんどの Markdown レンダラーは標準 HTML を出力します。

Markdown と GitHub Flavored Markdown は同じですか？

いいえ。GitHub Flavored Markdown（GFM）はテーブル、タスクリスト、取り消し線、オートリンクを追加した CommonMark のスーパーセットです。プレーンな Markdown（CommonMark）にはこれらの機能は含まれていません。Markdown を GitHub で表示する場合は GFM 構文で書いてください。別のレンダラーを対象とする場合は、そのレンダラーがサポートする拡張機能を確認してください。

Markdown に画像を含めることはできますか？

はい。構文は ![代替テキスト](image-url) です。代替テキストは角括弧の中に、画像 URL は丸括弧の中に入れます。任意のタイトルを追加することもできます：![alt](url "タイトル")。ほとんどのレンダラーは src、alt、title 属性を持つ <img> タグに変換します。

Markdown でテーブルを作成するには？

テーブルは元の Markdown 仕様には含まれていませんが、GFM と最新のパーサーの多くはサポートしています。パイプ（|）で列を区切り、ハイフン（---）でヘッダー行を作ります：| 氏名 | 年齢 |\n|---|---|\n| 田中太郎 | 30 |。区切り行のコロンで整列を制御します：:--- で左、:---: で中央、---: で右揃えです。

このプレビュアーを使用するとテキストがサーバーに送信されますか？

いいえ。Markdown パーサーは JavaScript を使用してブラウザ内で完全に動作します。テキストはデバイス上に留まり、ネットワーク経由で送信されることはありません。ツールを使用中にブラウザのネットワークタブを開いて確認できます。

このプレビュアーはどの Markdown 要素をサポートしていますか？

このプレビュアーは見出し（h1〜h6）、太字、斜体、取り消し線、インラインコード、言語ヒント付きフェンスコードブロック、順序付き・順序なしリスト、リンク、引用、水平線を処理します。これらの要素は CommonMark のパースルールに従います。

数式や図表を含む Markdown をプレビューするには？

数式（LaTeX）と図表（Mermaid）は CommonMark や GFM に含まれない拡張機能です。レンダリングするには、数式向けの markdown-it-katex プラグインを使った markdown-it のような拡張機能をサポートするパーサー、または Mermaid ブロックをネイティブレンダリングする GitHub のようなプラットフォームが必要です。このプレビュアーは標準 Markdown 要素に特化しています。