Markdownプレビュー
Markdownを記入し、ライブHTMLプレビューを並べて表示できます。
リアルタイムでレンダリングされたMarkdownがここに表示されます。
Markdownプレビュー — お手軽にオンラインでMarkdownを編集・プレビュー
左パネルにMarkdownを入力し、右パネルでリアルタイムのHTMLプレビューを確認できます。無料のオンラインMarkdownプレビューツールは、見出し、太字、斜体、リンク、画像、コードブロック、テーブル、リストなどをすべてブラウザ内で即時レンダリングします。
什么是Markdown？
Markdownは、ジョン・グリバーが2004年に考案した軽量なマーカアップ言語です。これは、HTMLや他の形式に簡単に変換可能なプレーンテキストフォーマットシンタックスを使用します。Markdownは、GitHubのREADME、ドキュメンテーションサイト、ブログプラットフォーム、ノートアプリ、テクニカルライティングなど、多くの場面で標準的な書き方として採用されています。
<h1>や<strong>などのHTMLタグではなく、# ヘッディングや**太字**のように書きます。これにより、Markdownは入力が早く、変換前の表示でも読みやすくなります。GitHub、GitLab、Stack Overflow、Reddit、Discord、Notionなど多くのプラットフォームがMarkdownをネイティブにサポートしています。
ライブMarkdownプレビュー機能を使うと、公開する前に正確にフォーマットされたテキストの表示が確認できます。これにより、Markdownを盲目に書く際の推測の必要性を排除し、フォーマットエラーを早期に検出できます。
このMarkdownプレビューツールの使い方
ツールの使用は簡単です：
- Markdownを入力または貼り付け：左のエディタパネルにMarkdownを新規で入力したり、既存のMarkdownコンテンツを貼り付けたりできます。
- ライブプレビューを確認：右パネルで即時更新されるプレビューを確認できます。キー入力ごとに新しいレンダリングが行われます。
- ツールバーのボタンを使用：見出し、太字、斜体、リンク、画像、コードブロック、リストなどをワンクリックで挿入できます。
- レンダリングされたHTMLをコピー：メールテンプレート、CMS、ドキュメンテーションジェネレータなどに必要な生のHTML出力が必要な場合は、コピーできます。
- Markdownソースをコピー：GitHubのREADME、ブログ投稿、ノートアプリなどに貼り付けるためにMarkdownソースをコピーできます。
主な機能
| 機能 | ベネフィット |
|---|---|
| ライブプレビュー | タイピングしながら即時表示 — レンダリングの遅延なし |
| ツールバーショートカット | 見出し、太字、斜体、リンク、コードをワンクリックで挿入 |
| HTML出力のコピー | メール、CMS、スタティックサイトなどに生のHTMLを取得 |
| Markdownのコピー | GitHub、ブログ、ノートにソースMarkdownを取得 |
| 全てのMarkdownサポート | 見出し、太字、斜体、リンク、画像、コード、テーブル、リスト、ブロッククォート |
| ダークモード対応 | プレビューアがテーマに自動で適応 |
| ブラウザ内処理 | サーバーにデータを送信する必要なし — あなたのコンテンツはプライバシーを保ちます |
多くのオンラインMarkdownエディタとは異なり、このツールはアカウント不要、インストール不要、サーバー通信不要です。あなたのコンテンツはブラウザ内に残ります。
一般的なユースケース
GitHub READMEの作成
すべてのオープンソースプロジェクトに明確なREADMEが必要です。ここにMarkdownを入力し、フォーマットをプレビューし、結果を直接リポジトリにコピーできます。ドキュメンテーションに含まれるJSON例を検証するには、JSONフォーマッタを使用してください。
ブログ投稿の下書き
多くのブログプラットフォーム（Hugo、Jekyll、Ghost、Dev.to）はMarkdownを使用してコンテンツを作成します。ここに投稿を下書きし、レイアウトをプレビューし、最終バージョンをCMSに貼り付けてください。見出しのテキストケースを変換する必要がある場合は、テキストケース変換を使用してください。
ドキュメンテーションの作成
技術ドキュメンテーションでは、Markdownの簡潔さと移動性がよく使われます。コミットする前にドキュメンテーションをプレビューし、見出し、コードブロック、テーブルが正しくレンダリングされているか確認してください。
エメールテンプレートのプロトタイピング
Markdownでエメールコンテンツを記述し、HTML出力をコピーし、エメールビルダーに貼り付けてください。特にトランザクショナルメールやニュースレターに役立ちます。
Markdown構文の簡単なリファレンス
# ヘッディング1から###### ヘッディング6— 六つのレベルの見出し**太字**と*斜体*— 基本的なテキストフォーマット[リンクテキスト](url)— インラインリンク— 画像`インラインコード`と三重バッククォートコードブロック — コードフォーマット> ブロッククォート— 引用テキスト- アイテムまたは1. アイテム— 非順序リストと順序リスト| 列 | 列 |— 箇条書きで表---— 水平ルール
マークダウンをより良くするためのヒント
- 見出しレベルを一貫して使用。タイトルには
#、セクションには##、サブセクションには###を使用してください。レベルを飛ばす（例：#から###にジャンプ）と、ドキュメント構造が混乱します。 - リストやコードブロックの前後に空白行を追加。多くのMarkdownパーサーは、ブロックレベル要素を正しく識別するために空白行が必要です。
- 公開前にプレビューを確認。異なるプラットフォームではMarkdownのレンダリングがわずかに異なります。いつも公開前にプレビューを確認してください。
- 言語タグ付きのコードブロックを使用。
```javascriptではなく```だけではなく、GitHubやほとんどのドキュメンテーションプラットフォームでシンタックスハイライトを有効にします。 - テーブルはシンプルに保つ。マージセルやネストされたコンテンツを持つ複雑なテーブルはMarkdownではうまく動作しません。高度なレイアウトにはHTMLテーブルを使用してください。
よくある質問
このMarkdownプレビューツールは無料ですか？
はい。ツールは完全に無料で、アカウント不要、使用制限なしです。すべてのレンダリングはあなたのブラウザ内で行われます。
このツールはGitHub Flavored Markdownをサポートしていますか？
はい。ツールは標準MarkdownとGitHub Flavored Markdown拡張機能（テーブル、タスクリスト、打ち消し線、シンタックスハイライト付きのフェンスコードブロック）をサポートしています。
HTML出力をコピーできますか？
はい。"HTMLをコピー"ボタンをクリックして、Markdownから生成された生のHTMLをコピーできます。HTMLエディタ、メールテンプレート、CMSなどに貼り付けることができます。
私のコンテンツはサーバーに保存または送信されますか？
いいえ。すべてのMarkdownパースとレンダリングは、markedライブラリを使用してあなたのブラウザ内で行われます。
ツールはブラウザで動作しますか？
はい。ツールはブラウザ内で動作し、アカウント不要、インストール不要です。あなたのコンテンツはプライバシーを保ちます。