Markdownエディタ - ライブプレビューとHTML出力
左右に並んだエディタでMarkdownを書き、すぐにプレビューを確認して、整ったHTMLをコピーまたはダウンロードできます。すべてブラウザ内で完結します。
左側にMarkdownを入力または貼り付けると、右側に変換結果が表示されます。入力内容はアップロードされず、エディタは端末上だけで動作します。
Markdownエディタ - ライブプレビューとHTML出力
左右に並んだエディタでMarkdownを書き、すぐにプレビューを確認して、整ったHTMLをコピーまたはダウンロードできます。すべてブラウザ内で完結します。
プレビュー
単語数:0文字数:0
仕組み:CommonMark互換エンジンで解析し(表、フェンスコード、取り消し線を有効化)、安全のため生HTMLを無効にしています。プレビューにはコピーまたはダウンロードできるHTMLがそのまま表示されます。
オンラインMarkdownエディタについて
このMarkdownエディタは、すぐ横にライブプレビューがある、集中して書ける環境を提供します。ソースパネルにMarkdownを入力または貼り付けると、キーを押すたびに結果が更新されるため、公開前に見出し、リスト、リンク、表、コードブロックの見た目を正確に確認できます。すべてブラウザ内で処理され、パーサーは端末上で動作します。アカウントは不要で、入力内容がサーバーに送信されることもないため、個人的なメモや社内文書、未公開の下書きにも安心です。
プレビューはCommonMark互換のレンダラーで動作し、多くの執筆者が期待するGitHub風の拡張にも対応しています。パイプ区切りの表、フェンスコードブロック、二重チルダによる取り消し線、裸のURLの自動リンク、スマートクォートやダッシュ、省略記号などの組版置換をすぐに使えます。ソース内の生HTMLは意図的に無効にしているため、貼り付けた断片からスクリプトやスタイルをプレビューへ注入できません。コピーまたはダウンロードする出力は、どこで使っても同じように動く、シンプルで予測可能なマークアップです。
文書が完成したら、複数の出力方法を選べます。「HTMLをコピー」は変換済みマークアップをクリップボードに入れ、CMSやメールテンプレート、静的サイトのレイアウトへ直接貼り付けられます。「HTMLをダウンロード」は同じマークアップを、適切なDOCTYPE、文字コード、ビューポート宣言を含む完全な単独Webページにして保存します。ブラウザで開いたり同僚に渡したりできます。「Markdownをダウンロード」は元のソースを.mdファイルとして保存し、「クリア」は作業スペース全体をワンクリックでリセットします。
エディタの下には単語数と文字数が表示されるため、ブログの導入文、商品説明、READMEの節、学会要旨など、長さに制限がある文章を書くときに便利です。カウンターはシャープ記号やパイプなど純粋な句読点トークンを除外するため、マークアップではなく読者が実際に読む語数を数えます。
このエディタは、完全な公開ワークフローではなく軽快さを重視しています。端末間の文書同期、LaTeX数式やMermaid図の表示、PDFやDOCXへの直接出力には対応していません。これらには専用コンバーターを併用してください。Markdownの下書き、忠実なプレビュー、きれいなHTML出力を、無料・登録不要ですぐに行えることが本ツールの役割です。
Markdownエディタの例
よく使うスニペットと、ライブプレビューでの表示例です。
| 入力するMarkdown | プレビューの表示 | 仕組み |
|---|---|---|
| ## リリースチェックリスト | レベル2の見出し | 先頭の#を1〜6個使うと、h1〜h6の見出しになります。 |
| | 名前 | 数量 | | --- | --- | | ペン | 12 | | ヘッダー行付きの2列テーブル | パイプとダッシュの区切り行でGitHub形式の表を作成します。 |
| ~~旧価格~~ $19 | 新価格の前に取り消し線の文字 | 文字を二重チルダで囲むと取り消し線になります。 |
| 今日は https://example.com を訪問 | 裸のURLがクリック可能なリンクに変換 | 自動リンクが有効なので、山括弧なしで通常のURLを検出します。 |
Markdownエディタの使い方
- 左側のソースパネルにMarkdownを入力または貼り付けます。右側のプレビューは入力中に更新されます。
- 長さに制限がある場合は、エディタ下の単語数と文字数を確認します。
- 「HTMLをコピー」で変換済みマークアップをクリップボードへ入れるか、「HTMLをダウンロード」で完全な単独Webページを保存します。
- 「Markdownをダウンロード」で元の.mdソースを保存し、「サンプルを読み込む」で例を試し、「クリア」で最初からやり直します。
Markdownエディタに関するよくある質問
テキストはどこかにアップロードされますか?
いいえ。解析とプレビューの変換は、ページ内のJavaScriptエンジンによってブラウザ内だけで実行されます。文章が端末から出ることはなく、タブを閉じると破棄されるため、機密性の高い下書きにも安全です。
どのMarkdown構文に対応していますか?
CommonMarkに加えて、パイプ表、フェンスコードブロック、取り消し線、裸のURLの自動リンクなど、一般的なGitHub風拡張に対応しています。アスタリスクやアンダースコアによる強調、入れ子のリスト、引用、画像も期待どおりに表示されます。
Markdown内の生HTMLが表示されないのはなぜですか?
生HTMLの通過は意図的に無効にしています。貼り付けた内容がスクリプトやスタイルをプレビューに注入するのを防ぎ(一般的なXSSの経路です)、出力マークアップをきれいに保つためです。インラインタグではなくMarkdown構文を使ってください。
Markdownを完全なWebページにするには?
「HTMLをダウンロード」をクリックしてください。DOCTYPE、文字セット、ビューポートのメタ情報を含む完全な文書に変換済みマークアップを包むため、保存したファイルは追加作業なしでどのブラウザでも正しく開けます。
出力したHTMLをWordPressやメールに貼り付けられますか?
はい。「HTMLをコピー」は外部スタイルシートやスクリプトを含まないセマンティックなマークアップなので、CMSのコードエディタ、メール作成ツール、文書システムにきれいに貼り付けられます。スタイルは貼り付け先のテーマが適用します。