Markdown エディタ
このツールについて
使い方
WYSIWYG モードで直感的に文書を編集できます。テキストモードに切り替えると Markdown ソースを直接編集できます。
キーボードショートカット
太字: Ctrl+B (Mac: ⌘B)
斜体: Ctrl+I (Mac: ⌘I)
インラインコード: Ctrl+Alt+E (Mac: ⌘⌥E)
引用: Ctrl+Shift+. (Mac: ⌘⇧.)
対応する Markdown 構文
見出し (H1〜H6)、太字、斜体、取り消し線、インラインコード、リスト (箇条書き・番号付き・タスク)、引用、コードブロック、テーブル、水平線、リンク、画像、GitHub アラート、折りたたみに対応しています。
よくある質問
- Q. 編集中の文章のプライバシーはどう守られていますか?
- A. 編集処理はお使いのブラウザ内で完結し、文章が外部に送信されることはありません。「ブラウザに保存する」を有効にした場合のみご利用のブラウザのローカルストレージに保存され、他のデバイスや外部サーバーへ共有されることはありません。
- Q. 別のページに移動した後も内容は残りますか?
- A. ツールバー右の「ブラウザに保存する」スイッチを ON にしておけば、次回アクセス時も内容が復元されます。OFF のときはブラウザを閉じると消えます。
- Q. GitHub の README にそのまま貼り付けられますか?
- A. はい。GitHub Flavored Markdown (GFM) の主要な構文 (テーブル、タスクリスト、取り消し線、アラート) に対応しているため、コピーした Markdown はほぼそのまま貼り付けられます。
- Q. WYSIWYG モードとテキストモードはどう使い分ければよいですか?
- A. 文章を書きながら見た目を整えたい場合は WYSIWYG が便利です。一方、既存の Markdown を貼り付けて細かく整形したい場合や、生のソースを直接編集したい場合はテキストモードが向いています。
- Q. 画像を貼り付けられますか?
- A.
形式で外部画像 URL を参照する記法は使えますが、画像ファイルそのもののアップロードには対応していません。画像を埋め込みたい場合は事前に画像ホスティングサービス等にアップロードして URL を取得してください。
入力した内容はサーバーへ送信されません。すべての処理はブラウザ内で完結するため、安心してご利用いただけます。
有効にすると、次回アクセス時も内容が引き継がれます (このブラウザのみ。他のデバイス・ブラウザとは共有されません)。
豆知識
Markdown の誕生
Markdown は2004年に John Gruber 氏が Aaron Swartz 氏の協力を得て作成した軽量マークアップ言語です。 「読みやすく、書きやすいプレーンテキスト形式で記述し、それを構造的に正しい HTML に変換する」 というコンセプトで設計されました。 名前は HTML の "Markup" に対する言葉遊びです。
Markdown の方言と標準化
オリジナルの Markdown は仕様が曖昧だったため、GitHub Flavored Markdown (GFM)、 CommonMark、MultiMarkdown など多くの方言が生まれました。 2014年には仕様の標準化を目指す CommonMark プロジェクトが発足。 GFM は CommonMark をベースにテーブルやタスクリスト、取り消し線などを追加した拡張仕様で、 GitHub、GitLab、多くの開発ツールで採用されています。
Markdown が普及した理由
Markdown が広く普及した理由は、その学習コストの低さにあります。 見出しは #、太字は **、リストは - と、 装飾記号が直感的で覚えやすく、プレーンテキストのままでも十分に読めます。 README、ブログ、ドキュメント、チャットツールなど、 あらゆる場面で事実上の標準フォーマットとなっています。
参考リンク
- CommonMark Spec
Markdown の仕様として広く採用されている CommonMark の公式仕様書
- GitHub Flavored Markdown Spec
テーブル・タスクリスト等の GitHub 拡張仕様
- Milkdown
本エディタで使用している WYSIWYG Markdown エディタフレームワーク
- ProseMirror
Milkdown の基盤となっている構造化エディタライブラリ
このツールの更新履歴
見出しドロップダウンに現在のブロック種別を表示
カーソル位置のブロック種別 (H1〜H6 / 通常テキスト) がツールバーで一目でわかるようになりました。
コードブロック内で日本語入力 (IME) が壊れる問題を修正
コピーモードに「プレーンテキスト」を追加
Markdown 形式のコピーに加えて、レンダリング後のプレーンテキストとしてのコピーが選べるようになりました。
コードスパン末尾脱出をレースコンディションなしで再実装
CDP キーイベントとのレースを解消し、確実に脱出できるようになりました。
コピー時にリスト末尾で改行が過剰になる問題を修正
モード切替時にエディタへフォーカスを当てるよう修正
Backspace で空行になった際に書式をクリア
引用ブロックのツールバーを「追加」「解除」の 2 ボタンに分離
単語カウントを Intl.Segmenter ベースに変更し日本語に対応
Undo でコードブロック削除時にフォーカスが失われる問題を修正
テーブルの「|」ごと改行を自動で正規化
コードブロック先頭で ArrowUp 時に上に空行を挿入
引用ブロックのトグル動作を実装 (Ctrl+Shift+. でトグル)
インラインコード脱出の安定化 (End キー・マウスクリック対応)
URL リンク入力後のスペースでリンクから脱出
Ctrl+C/X で選択範囲を Markdown としてコピー
コピーボタンをツールバーに移動
引用ブロックのショートカットキーを追加 (Ctrl+Shift+.)
テキスト選択色のコントラストを改善 (ライト/ダーク両対応)
ツールバーの sticky 追従を PC 版にも適用
インラインコードスパン末尾からカーソルを脱出できるよう修正
スマホでスクロール時にエディタのテキストがツールバーを突き抜ける問題を修正
表示フォントファミリー選択機能を追加
コピペ時の <br> 挿入とフォーカス喪失を修正
入力エリアがコンテナ全体に広がらない問題を修正
ダークモードのスマホでスティッキーツールバーが透過になる不具合を修正
リロード直後に永続化トグルが元に戻るタイミング問題を修正
スマホ表示でツールバーをスクロール追従
スマホ表示でエディタ内テキストが極端に狭くなる問題を修正
Markdown エディタを公開
Milkdown Crepe ベースの WYSIWYG エディタ。Typora スタイルのインライン編集、ツールバーによるブロック・インライン要素の操作、ダークモード対応、LocalStorage への永続化に対応します。