入力・プレビュー・分割表示の使い分け
Markdownエディタ & ライブプレビューは,左側の入力内容を独自の軽量変換でHTMLへ変え,編集結果を確認するためのツールです.表示は「編集」「プレビュー」「分割」から選べます.編集は入力欄だけ,プレビューは変換結果だけを広く表示し,分割は広い画面で両方を並べます.狭い画面では分割を選んでも上下に並ぶため,端末の幅に合わせて使い分けてください.
入力上部のツールバーから,太字,斜体,見出し,リンク,インラインコード,コードブロック,引用,箇条書きの記号を挿入できます.文字列を選択していれば選択範囲の前後へ記号を置き,未選択ならカーソル位置へ雛形を入れます.これは記法入力を補助する機能であり,画面上の文字を直接装飾するWYSIWYG編集ではありません.挿入後のMarkdown自体を確認し,必要な閉じ記号やリンク先を調整します.
「サンプル」では対応記法を含む例文へ入力を置き換えます.現在の原稿へ追記する操作ではないため,作業中に試す場合は先にMarkdownを保存してください.「クリア」も入力を空にしますが,元に戻す履歴はありません.
この独自パーサーが扱う基本記法
ブロック単位では,行頭の#を1個から6個使う見出し,空行で区切られた段落,3個以上のハイフン・アスタリスク・アンダースコアによる水平線,行頭のハイフン・アスタリスク・プラスによる箇条書き,数字とピリオドによる番号付きリスト,行頭の大なり記号による引用を扱います.リストは連続する同種の行を一つにまとめますが,インデントから階層を作る入れ子リストには対応しません.
3個のバッククォートで始まるフェンス付きコードは,次のフェンスまでをコードブロックにします.開始行の後ろに書いた言語名は,表示用class名として安全な英数字等に限定して付与します.コード中の山括弧やアンパサンドはHTMLとして実行せず文字として表示し,太字やリンクなどのインライン変換も適用しません.フェンスを閉じ忘れた場合は残りの行がコードとして扱われるため,プレビューで範囲を確認してください.
インラインでは,バッククォートで囲んだ短いコード,角括弧と丸括弧で記述するリンク,二重アスタリスクまたは二重アンダースコアの太字,単一アスタリスクまたは単一アンダースコアの斜体を扱います.置換順序や境界判定はCommonMarkの規則を網羅したものではなく,記号が連続する文章では別の処理系と異なる結果になる場合があります.
非対応記法とCommonMark・GFMとの差
このツールは,CommonMarkやGitHub Flavored Markdownの適合テストを通すことを目的としたパーサーではありません.パイプ記号を使う表,画像記法,タスクリスト,脚注,取り消し線,自動リンク,見出しID,定義リスト,数式,Mermaid,HTML拡張などは対応範囲外です.入力しても意図したHTML要素へ変換されず,通常の文字列や段落として表示されることがあります.
箇条書きと番号付きリストは単層です.インデント,開始番号の保持,項目内の複数段落,リスト内コードブロックなどを厳密に解釈しません.引用も連続する引用行を一つのブロックへまとめる簡易処理で,多段の引用階層を構築するものではありません.同じ原稿をGitHub,CMS,静的サイト生成器へ移す場合は,各掲載先のプレビューで差を確かめてください.
Markdownは実装ごとに拡張範囲が異なります.この画面で見えた結果を公開先でも再現する必要がある場合は,まず短い原稿で見出し,改行,リスト,リンク,コードを比較し,差がある記法だけ掲載先の規則へ合わせる方法が有効です.
リンクとHTMLプレビューの境界
Markdownリンクは,表示文字列とURLをHTML属性用にエスケープしてからアンカー要素へ変換します.URLはhttp,https,mailto,telの明示的なスキーム,ページ内の#,ルート相対やドット相対などの限定した形式を受け付けます.javascriptやvbscriptなどの危険なスキーム,先頭が二重スラッシュのプロトコル相対URL,制御文字を含む値はリンクにせず,表示文字列だけを残します.
プレビューはSafeHtmlPreviewを通じて制限付きの領域へ表示し,入力中のHTMLらしい文字列も通常の文字として扱います.この制限は,エディタ画面で変換結果を確認するときの実行範囲を狭めるためのものです.「HTML保存」やHTMLコピーで取り出した文字列を,別のサイトやアプリへ貼り付けた後まで制御するものではありません.
したがって,第三者が入力したMarkdownを公開する場合や,出力HTMLをCMSへ登録する場合は,掲載先でも許可タグ・属性・URLを検査してください.本ツール内で表示できたことは,出力が任意の利用先で安全であることや,リンク先が信頼できることの証明にはなりません.
50万文字・1MBの上限とファイル入出力
本文の上限は50万文字です.直接入力とツールバー挿入のどちらでも,上限を超える更新は受け付けません.入力のたびにHTMLへ変換するため,上限以内でも文章構造,端末性能,ブラウザのメモリ状況によって操作感が変わります.巨大なログや長編原稿を扱う場合は,章ごとに分けると確認しやすくなります.
ファイル読込は1MB以下のMarkdownまたはテキストファイルを文字列として読み,本文が50万文字以内ならエディタへ反映します.ファイル名の拡張子だけで文字コードを変換する機能はなく,読み取れない文字コードでは文字化けすることがあります.ファイルが大きい,読込が中断された,テキストとして取得できないといった場合はエラーを表示し,既存原稿を不用意に置き換えません.
Markdown保存は現在の入力をdocument.mdとして,HTML保存は変換結果を基本的なHTML文書で包んでdocument.htmlとしてダウンロードします.HTMLには簡易的な表示用CSSを含みますが,公開サイトのテーマやレスポンシブ設計を再現するものではありません.
MDとHTMLのコピーはクリップボード権限やブラウザ設定により失敗する場合があり,そのときは画面のエラー表示を確認してください.
自動保存がない編集で原稿を守る手順
入力中のMarkdownはReactの状態としてページを開いている間のメモリに保持します.localStorageやIndexedDBへの自動保存,過去版の履歴,元に戻す専用機能,アカウント間同期,共同編集はありません.再読み込み,タブを閉じる操作,ブラウザの終了などで編集状態を復元できないため,長い作業では区切りごとにMD保存を行ってください.
実務では,最初に短いサンプルで掲載先との表示差を確認し,原稿作成中はMDを主な保存形式として残し,完成時にHTMLを補助出力として確認する流れが適しています.HTMLだけを保存すると,後からMarkdown記法へ戻す際に空白や構造が変わる場合があります.編集を再開する可能性があるなら,元のMDファイルも保持してください.
このエディタは基本記法の下書きと表示確認を助けるもので,公開先のMarkdown仕様,HTMLの安全性,アクセシビリティ,リンクの有効性を自動判定するものではありません.保存後はファイルを実際に開き,文字化け,コード範囲,リンク先,見出し階層を確認してから利用してください.