無料 Markdown エディター
ライブHTMLプレビュー付きでMarkdownを書きます。
使い方
- 左側のパネルにMarkdownテキストを入力または貼り付けます。右側のパネルにHTMLライブプレビューが表示されます。
- ツールバーボタンを使って、フォーマット(太字、斜体、見出し、リンクなど)を素早く挿入します。
- エディターの下に単語数、文字数、行数を表示します。
- Markdownを.mdファイルでダウンロードするか、HTML出力をコピーします。
よくある質問
このエディターは標準のMarkdown構文をサポートしていますか?
はい。見出し、太字、斜体、リンク、画像、コードブロック、リスト、引用、水平線をサポートしています。簡略化されたMarkdownパーサーがリアルタイムでHTMLにレンダリングします。
作業を保存できますか?
エディターは編集中にテキストをブラウザのメモリに自動的に保存します。.mdをダウンロードを使ってコンピューターにファイルとして保存します。
リンクや画像を挿入するには?
ツールバーボタンを使用します。リンクには、[テキスト](url)と入力します。画像には、を使用します。プレビューが瞬時に更新されます。
Markdownの小史
Markdownは2004年3月、Daring FireballのライターJohn Gruberが、Aaron Swartz（後にRedditを共同設立しRSS 1.0仕様を共著した才人）の多大な協力を得て生み出した。明示された設計目標（オリジナルの構文ページに記されている）は「できる限り読みやすくすること」だった。Gruberは、レンダリングなしでターミナルやプレーンテキストエディターで自然に見える、そのまま公開できるプレーンテキスト形式を目指した。このフォーマットは、人々がプレーンテキストのメールやUsenetの投稿ですでにやっていたことを形式化した：*asterisks for emphasis*、> for quoted text、段落間の空行。
この名前は「マークアップ言語」をもじったものだ。Markdownはマークアップするのではなく「格下げ（marks down）」するほど軽量ということだ。HTMLとの哲学的な違い：HTMLのソースはマシン向け、Markdownのソースは人間向け。.mdファイルはレンダリングなしでターミナルで読んでも快適なはずだ。
Gruberのオリジナルの構文ページは多くのエッジケースをあいまいにしており、2000年代後半を通じてMarkdownパーサーが必要なプロジェクトはそれぞれ独自のパーサーを書き、未指定の箇所で異なる判断をした。2010年代初頭までに同じ.mdファイルがReddit、GitHub、Stack Overflow、Jekyllブログで目に見えて異なるレンダリングをしていた。2014年にJeff Atwood（Stack Overflow、Discourse）、John MacFarlane（Pandoc）、GitHubやRedditやMeteorのエンジニアを含む作業グループが厳密な仕様を作成し、当初「Standard Markdown」と名付けられたがGruberが異議を唱えCommonMarkに改名された。CommonMarkは人間が読めるプロセとエッジケース600以上の機械可読テストスイートの両方を公開しており、現在のバージョンは0.31.2（2024年1月）だ。GitHub、GitLab、Reddit、Stack Overflow、Discourseや数十のプログラミング言語が現在準拠を宣言している。
基本構文
ほぼすべてのMarkdownバリアントで動作する構文、このエディターがサポートする実用的なベースラインだ。
| 使いたいもの | 書き方 |
|---|---|
| 見出し | # H1から###### H6まで |
| 太字 / 斜体 | **bold** · *italic* · ***both*** |
| インラインコード | `code` |
| コードブロック | 3つのバッククォートでフェンス；任意の言語タグでシンタックスハイライト |
| 番号なしリスト | - item（または*、+） |
| 番号ありリスト | 1. first：実際の番号は通常関係ない |
| リンク | [text](https://example.com) |
| 画像 | ：アクセシビリティのためaltテキストは重要 |
| ブロッククォート | > quoted text |
| 水平線 | --- 単独の行に |
よくある2つのはまりポイント：改行1つでは改行が作られない：新しい段落には空行が必要で、段落内の強制改行には改行前に2つのスペース（またはGFMではバックスラッシュ）が必要だ。そしてMarkdownはHTMLのスーパーセットだ：インラインHTMLタグはすべてレンダリング出力にそのまま渡される。これは時々便利で、時々セキュリティリスクになる。
GitHub Flavored Markdownとその他のバリアント
GFMはGitHubのCommonMarkのスーパーセットだ。テーブル（ハイフン区切り行付きのパイプ区切り行）、タスクリストアイテム（- [ ]未チェック、- [x]チェック済み）、打ち消し線（~~text~~）、自動URL検出、危険なタグを取り除く「禁止rawHTML」フィルターを追加する。GitHub自体もいくつかの仕様外の追加機能をレンダリングする：絵文字ショートコード（:tada:）、@メンション、#123のissueオートリンク、アラートコールアウト（> [!NOTE]）、折りたたみ可能な<details>セクション。ただしこれらはGFM仕様の一部ではなくGitHubのレンダリング機能だ。
他のバリアント：
- Pandoc Markdown：メタデータブロック、脚注、定義リスト、数式（
$...$LaTeX）、引用を追加する。「万能」ユニバーサルドキュメントバージョン。 - MultiMarkdownとMarkdown Extra：GFMのテーブル構文に影響を与えた初期の拡張バリアント。
- R Markdown：MarkdownにRまたはPythonの実行可能コードチャンクをラップし、Pandoc経由でHTML/PDF/Wordにレンダリングする。
- MDX：MarkdownにJSXを加えたもの。Reactベースのドキュメント（Docusaurus、Next.js MDX）で使用される。
- Discordは意図的なサブセットを使用する。Slackは「mrkdwn」と呼ばれる意図的に非標準のバリアントを使用し、アスタリスク1つで太字、アンダースコア1つで斜体となる。標準的なMarkdownをSlackに貼り付けると意外な結果になる。
Markdownが使われる場所
開発者がテキストを書く場所ほぼすべて：
- コードホスティング：すべてのGitHub README、issue、PRコメント；GitLab、Bitbucket、Codeberg、Giteaでも同様。
- Q&Aとフォーラム：Stack Overflow、Stack Exchange、Reddit、Discourse。
- ノートテイキング：Obsidian、Joplin、LogseqはMarkdownをネイティブで使用する。NotionとBearはMarkdownにエクスポートできる。
- 静的サイトジェネレーター：Jekyll（Ruby、Kramdown）、Hugo（Go、Goldmark）、Eleventy（Node、markdown-it）、Docusaurus、MkDocs、Astro。
- ドキュメントツール：JSDoc、TypeDoc、Rustdoc（Rustはドキュメントコメントに
///を使いCommonMarkを採用）、Sphinx（MyST経由）。 - モダンなチャット：Mattermost、Zulip、Element/MatrixはすべてMarkdownをメッセージフォーマットに使用する。
MarkdownはIETFのメディアタイプ（text/markdown、RFC 7763、2016年3月）にも登録されており、どのバリアントを適用するかを受信者が知るためのvariantパラメーター（GFM、CommonMark、MultiMarkdownなど）を持つ。一般的なファイル拡張子：.mdが圧倒的に多く、他に.markdown、.mdown、.mkdn、.mkd。
このエディターのパーサーについて
このページは上記の共通サブセット（見出し、太字と斜体、リンク、画像、フェンスコード、リスト、ブロッククォート、水平線）をカバーする簡略化されたMarkdownパーサーを使用している。完全なCommonMarkまたはGFM実装ではなく、すべてのエッジケース（異なる箇条書きの深くネストしたリスト、遅延改行継続、文書を横断するリンク参照定義）を処理できない場合がある。ミッションクリティカルなCommonMark準拠には、marked.js、markdown-it、commonmark.jsのような専用パーサーが適切な選択だ。信頼できないMarkdownの本番レンダリングには、インラインHTMLによるXSSを防ぐためDOMPurifyのようなサニタイザーにパーサーの出力をパイプする。
このツールを使う場面
- GitHub READMEの下書き：リポジトリに貼り付ける前にライブプレビューで確認する。
- ブログ記事の執筆：ソースファイルが
.mdのJekyll、Hugo、Ghost、Eleventy向け。 - NotionまたはObsidianのノートのプロトタイプ作成：デスクトップアプリを開かずに。
- クイックスニペットをHTMLに変換：CMS、メール、Slackキャンバスに埋め込む用途。
- Markdown構文の学習：ライブプレビューで各文字の動作がすぐにわかる。
- 機密コンテンツの下書き：エディターはブラウザの
localStorageに自動保存するため、機密の契約条項やリリース前の告知はデバイスから出ることはない。
その他の質問
改行1つでなぜ新しい行が作られないのか？
設計上そうなっている。Markdownが改行1つを継続する段落に折りたたむのは、フォーマットがプレーンテキストとして自然に見えるように設計されているからだ。エディターで任意の幅で折り返しても、レンダリング出力は壊れない。段落内で強制改行するには、行末に2つのスペース（オリジナルのMarkdown慣習）またはGFMではバックスラッシュを付ける。新しい段落には2つの間に空行を入れる。
Markdown内でHTMLを使えるか？
はい。MarkdownはHTMLのスーパーセットだ。<span>、<a>、<sub>、<sup>などのインラインタグはレンダリング出力にそのまま渡され、内部のMarkdown構文も認識される。ブロックレベルのHTML（<div>、<table>）は前後のMarkdownを空行で区切る必要があり、ブロック内ではMarkdownは処理されない。Markdownがネイティブに表現できないもの（<img width="…">での画像の寸法、<kbd>のキーボードチップ、<details>の折りたたみセクション）に使う。
テーブル、脚注、タスクリストはどうか？
3つはすべてオリジナルのMarkdown仕様ではなくGFM拡張だ。テーブルはハイフン区切り行を持つパイプ区切りの行を使う；このページの簡略化パーサーはプレーンテキストとしてレンダリングするかもしれない。脚注（[^1]参照と[^1]: definition定義）はGFM仕様外のGitHubレンダリング機能だ。タスクリスト（- [ ]と- [x]）はGFMに含まれている。これらを完全にカバーするには、ファイルをGitHubプレビュー自体などのCommonMark+GFM準拠レンダラーに貼り付ける。
なぜ画像にaltテキストが必要なのか？
スクリーンリーダーが画像に出会ったときに読み上げるのがaltテキストで、視覚に障害があるユーザーの主要なアクセシビリティフックだからだ。は技術的に有効なMarkdownだがスクリーンリーダーには役に立たない；は本当に説明的だ。altテキストを省略したりファイル名で埋めたりすることは、ウェブコンテンツで最も一般的なアクセシビリティの失敗の1つだ。
何かサーバーに送信されるか？
いいえ。エディターはブラウザでMarkdownをHTMLにパースし、ライブプレビューをローカルで更新し、自動保存にはブラウザのlocalStorageを使用する：デバイス上の小さなプライベートストアだ。ページから何も出ることはない。ロードされた後はオフラインで動作する。