Markdownプレビュー
Markdownを書いてリアルタイムプレビュー。
このツールについて
Markdownプレビューは、MarkdownをリアルタイムでHTMLにレンダリングする無料オンラインエディターです。左側にMarkdownコンテンツを入力または貼り付けると、見出し・リスト・コードブロック・テーブル・リンク・画像が右側に即座に表示されます。READMEファイルを書く開発者、技術文書を作成するテクニカルライター、Markdownでブログを書く方に最適です。
レンダリングはmarked.jsで処理され、GFM拡張（テーブル・取り消し線・タスクリスト・フェンスコード）を含む完全なCommonMarkに対応しています。コードブロックはhighlight.jsにより100以上の言語でシンタックスハイライトされます。すべてクライアントサイドで動作し、コンテンツがサーバーに送信されることはなく、アカウントも不要です。
GitHub README.mdファイルのプレビュー、静的サイトジェネレーター（Jekyll・Hugo・Gatsby）のブログ投稿の作成、開発者ドキュメントの下書き、他のツールからコピーしたMarkdownの表示確認に最も役立ちます。
Heading 1
Heading 2
Heading 3
Write some bold and italic text. Also strikethrough.
- Item 1
- Item 2
- Nested item
- First
- Second
Blockquote example
function hello() {
console.log("Hello, World!");
return 42;
}def fibonacci(n):
if n <= 1:
return n
return fibonacci(n-1) + fibonacci(n-2)| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
Inline code example.
使い方
- 1
左側のエディターにMarkdownテキストを入力または貼り付けます。
- 2
右側のプレビューがリアルタイムで更新されます。
- 3
コピーボタンでレンダリングされたHTMLをコピーします。
- 4
シンタックスハイライトされたコードブロックで、フェンスコードが正しくレンダリングされているか確認します。
- 5
コピーしたHTMLをCMS・メールテンプレート・Webページに直接貼り付けます。
機能
リアルタイムプレビュー
入力するたびにMarkdownがHTMLとしてリアルタイムでレンダリングされます。遅延はありません。
シンタックスハイライト
コードブロックはhighlight.jsにより100以上のプログラミング言語でシンタックスハイライトされます。
完全なMarkdown対応
見出し・テーブル・コードブロック・画像・リンクなど全標準Markdown構文に対応しています。
HTMLのコピー出力
ワンクリックでレンダリングされたHTMLをエクスポートし、どのプロジェクトにも貼り付けられます。
主な活用事例
- ›コミット前にGitHubのREADME.mdファイルをプレビューして表示を確認する。
- ›Jekyll・Hugo・Ghost向けのMarkdownブログ記事を公開前に確認する。
- ›シンタックスハイライトされたコードブロックを含む技術文書を下書きして書式を確認する。
- ›MarkdownをHTMLに変換してCMS・メールテンプレート・Webプロジェクトに貼り付ける。
よくある質問
どのMarkdown機能に対応していますか？
見出し、リスト、リンク、画像、コードブロック、テーブルなど全標準構文に対応。
結果をエクスポートできますか？
はい、レンダリングされたHTMLをコピーできます。
どのMarkdown仕様が使われていますか？
marked.jsライブラリを使用し、テーブル・取り消し線・フェンスコードブロックなどのGFM拡張を含むCommonMarkに対応しています。
すべての言語でシンタックスハイライトは動作しますか？
シンタックスハイライトはhighlight.jsで提供され、コードフェンスの識別子から自動検出される100以上のプログラミング言語に対応しています。
READMEファイルのプレビューに使えますか？
はい。README.mdのコンテンツをエディターに貼り付けると、GitHubなどでどのように表示されるかを確認できます。