Markdownプレビュー

Markdownを書いて、レンダリングされたHTMLをリアルタイムでプレビュー

Markdown プレビューへようこそ

これはライブプレビューエディターです。左側に入力を開始すると、右側にレンダリングされた出力が表示されます。

機能

  • 太字、斜体、打ち消し線テキスト
  • リンクと画像
  • 構文ハイライト付きコードブロック

コード例

function greet(name) {
  console.log(`こんにちは、${name}さん！`);
}
greet("世界");

テーブル例

機能状態
GFM テーブル対応
タスクリスト対応
打ち消し線対応

タスクリスト

  • Markdownを書く
  • プレビューを確認する
  • HTMLにエクスポートする

引用ブロックも対応しており、ダークモードで見栄えが良くなります。

Markdownの作成をお楽しみください！

Markdown チートシート
**太字**太字テキスト
*斜体*斜体テキスト
~~打ち消し線~~打ち消し線
# 見出し見出し（1-6）
[テキスト](url)リンク
![代替テキスト](url)画像
`コード`インラインコード
```言語```コードブロック
> 引用引用ブロック
- 項目順序なしリスト
1. 項目順序付きリスト
---水平線
| a | b |テーブル
- [x] タスクタスクリスト

Markdown プレビューツールとは？

Markdown プレビューツールは、左側でMarkdownを作成し、右側でレンダリングされた出力をリアルタイムに確認できる無料のオンライン分割画面エディターです。テーブル、タスクリスト、打ち消し線、囲みコードブロックを含むGitHub Flavored Markdown（GFM）に対応しています。

GitHubリポジトリのREADMEを作成している場合でも、ドキュメントやブログ記事を書いている場合でも、Markdownの構文を学んでいる場合でも、このツールは入力中に即座な視覚的フィードバックを提供します。

Markdown プレビューエディターの使い方

  • 左側のエディターペインにMarkdownコンテンツを入力または貼り付けます。右側のプレビューペインは入力に合わせて自動的に更新されます。
  • 上部の書式ツールバーを使用して、太字、斜体、見出し、リンク、画像、コードブロック、リストを構文を覚えずに挿入できます。
  • 「HTMLをエクスポート」をクリックすると、レンダリングされた出力がクリーンなスタイル付きのスタンドアロンHTMLファイルとしてダウンロードされます。
  • 「MDをコピー」をクリックすると、生のMarkdownテキストがクリップボードにコピーされます。
  • 下部のMarkdownチートシートを展開して、対応しているすべての構文をクイックリファレンスとして確認します。

対応しているMarkdown機能

このエディターは完全なCommonMark仕様に加え、GitHub Flavored Markdownの拡張機能をサポートしています。見出し（h1〜h6）、太字、斜体、打ち消し線テキスト、順序付き/順序なしリスト、引用ブロック、水平線、インラインコードと囲みコードブロック、リンク、画像、配置付きテーブル、タスクリストのチェックボックスが使用できます。

より良いMarkdownを書くためのコツ

  • 見出しは階層的に使用する：タイトルはh1、セクションはh2、サブセクションはh3
  • 段落間やリストの前後に空行を入れて正しくレンダリングされるようにする
  • 構文ハイライトをサポートするレンダラーでは、言語識別子付きの囲みコードブロックを使う
  • フォーマットの問題を早期に発見するために、頻繁にプレビューする
  • あまり使わない要素の構文を学ぶために、ツールバーボタンを使う

一般的な使用例

  • コミット前にGitHub READMEファイルを作成・プレビューする
  • Markdownでドキュメントや技術文書を作成する
  • Hugo、Jekyll、Astroなどの静的サイトジェネレーター向けにブログ記事を作成する
  • 即時の視覚的フィードバックを使ってMarkdown構文を学習する
  • MarkdownをHTMLに変換してウェブサイトやメールに埋め込む

よくある質問

Markdownをオンラインでプレビューするには？+
このツールの左側のエディターペインにMarkdownを貼り付けるか入力します。レンダリングされたプレビューは右側に即座に表示され、変更に合わせてリアルタイムに更新されます。
このツールはGitHub Flavored Markdownをサポートしていますか？+
はい。エディターはテーブル、チェックボックス付きタスクリスト、打ち消し線テキスト、囲みコードブロックを含むGFM拡張機能を完全にサポートしています。正確なレンダリングのためにremark-gfmパーサーを使用しています。
MarkdownをHTMLとしてエクスポートできますか？+
はい。ツールバーの「HTMLをエクスポート」ボタンをクリックすると、CSSスタイルが埋め込まれたスタンドアロンHTMLファイルがダウンロードされます。ファイルは任意のブラウザで開いたり、ウェブサイトに埋め込んだりできます。
Markdownでテーブルを作成するには？+
パイプ（|）で列を区切り、ハイフン（-）でヘッダー行の区切りを作成します。例：| Column 1 | Column 2 | の後に |----------|----------|、次にデータ行を入力します。プレビューペインにはレンダリングされたテーブルが即座に表示されます。
MarkdownとHTMLの違いは何ですか？+
Markdownは、HTMLより読み書きしやすい軽量なテキスト書式構文です。表示用にHTMLに変換されます。このツールでは、Markdownで書きながら、その結果として生成されるHTML出力を横並びで確認できます。
このエディターはGitHubのREADMEファイルに使えますか？+
もちろんです。このエディターはGitHubが使用しているものと同じGFM構文をサポートしているため、READMEも同じようにレンダリングされます。ここでコンテンツを作成・プレビューしてから、Markdownをリポジトリにコピーしてください。

関連ツール

文字数カウントLorem Ipsum ジェネレーターJSON フォーマッター正規表現テスター

Markdownプレビュー — 無料のオンラインmarkdown プレビュー, markdown エディター, markdownからhtml, github フレーバー markdown, gfm プレビュー, ライブ markdown プレビュー, markdown 構文, markdown チートシート。会員登録不要。ブラウザで動作します。