マークダウンプレビューア

Markdownをリアルタイムでプレビュー表示

Markdownテキストを入力すると、リアルタイムでHTMLに変換しプレビュー表示します。見出し、太字、リスト、テーブル、コードブロックなど主要な構文に対応しています。入力したデータはブラウザ内のみで処理され、サーバーには一切送信されません。

使い方

1

Markdownを入力

左側(モバイルでは上側)のテキストエリアにMarkdownテキストを入力または貼り付けます。「サンプルを読み込む」ボタンで、主要な構文を含むサンプルを読み込むこともできます。

2

リアルタイムプレビュー

入力と同時に、右側(モバイルでは下側)にHTMLに変換されたプレビューがリアルタイムで表示されます。見出し・リスト・テーブル・コードブロックなどがスタイル付きで確認できます。

3

HTMLをコピー

「HTMLをコピー」ボタンをクリックすると、変換されたHTMLコードをクリップボードにコピーできます。ブログやCMSへの貼り付けに便利です。

Markdownとは

Markdown(マークダウン)は、2004年にJohn Gruberによって考案された軽量マークアップ言語です。プレーンテキストに簡単な記号を加えるだけで、見出し・太字・リスト・リンクなどの書式を表現できます。HTMLに比べて記述が簡潔で、可読性が高いのが特徴です。

現在ではGitHub、Qiita、Zenn、Notion、Slackなど多くのサービスでMarkdownが採用されており、エンジニアだけでなくライターやブロガーにも広く使われています。README.mdファイルやドキュメント作成のデファクトスタンダードとなっています。

主要な構文一覧

  • 見出し#から######まで6段階の見出しを作成できます。
  • 太字・斜体**太字***斜体*で文字を装飾します。
  • リスト-*で箇条書き、1.で番号付きリストを作成します。
  • リンク[表示テキスト](URL)でハイパーリンクを挿入します。
  • 画像![代替テキスト](画像URL)で画像を埋め込みます。
  • コードブロック:バッククォート3つで囲むと、ソースコードをフォーマット表示できます。
  • テーブル|で区切り、ヘッダーとデータ行で表を作成します。
  • 引用>で引用ブロックを作成します。
  • 水平線---***で区切り線を挿入します。

Markdownの活用シーン

技術ドキュメントの作成、ブログ記事の下書き、議事録の作成、READMEファイルの執筆など、テキストベースのあらゆるコンテンツ作成に活用できます。本ツールを使えば、記述した内容がどのように表示されるかをリアルタイムで確認でき、効率的な文書作成が可能です。

本ツールはブラウザ内のJavaScriptのみで動作する軽量なMarkdownパーサーを搭載しています。外部ライブラリに依存せず、主要な構文をカバーしています。プレビュー結果のHTMLをコピーして、ブログやWebサイトのコンテンツとして活用できます。

よくある質問

対応しているMarkdown構文を教えてください

見出し(h1〜h6)、太字、斜体、取り消し線、リンク、画像、箇条書きリスト、番号付きリスト、テーブル、引用、コードブロック、インラインコード、水平線に対応しています。これらはMarkdownで最もよく使われる基本構文です。

変換されたHTMLをブログに貼り付けられますか?

はい。「HTMLをコピー」ボタンで変換後のHTMLコードをクリップボードにコピーできます。WordPressなどのCMSのHTML編集モードに貼り付けることで、Markdownで書いた内容をそのまま記事として公開できます。

入力したデータは保存・送信されますか?

いいえ。すべてのデータはブラウザ内のみで処理され、サーバーに送信されることは一切ありません。ページを閉じるとデータは消えます。

無料で使えますか?

はい、完全無料です。登録やアカウント作成も不要です。

スマートフォンでも使えますか?

はい、スマートフォン・タブレット・PCなど、ブラウザが使えるすべてのデバイスに対応しています。

データについて

このツールは時効性のないデータのみを使用しています。計算式や変換係数は普遍的な値に基づいており、定期的な更新は不要です。

入力データはブラウザ内のみで処理されます。サーバーへの送信は一切ありません。