Markdown エディタ

Markdownエディタとは？

Markdownエディタは左右分割の執筆環境です。片側にプレーンテキストでMarkdownを書くと、もう片側にレンダリング結果がリアルタイムで反映されます。GitHubのREADME、各種ドキュメントポータル、静的サイトジェネレーター、ブログサービス、Obsidianのようなノートアプリ、さらにはDiscordやSlackといったチャットツールまで、あらゆる場面で使われている書式です。

Markdownの良さは、プレーンテキストのままでも読みやすく、レンダリングすればちゃんと構造化されたHTMLになる点にあります。ツールバーをいじる時間が減って、書くことそのものに集中できる。だからこそテクニカルライターや開発者に好まれているわけです。

最近のMarkdownエディタの多くは *GitHub-Flavored Markdown*（GFM）に対応しています。GFMは元のCommonMark仕様にテーブル、タスクリスト、言語指定付きコードフェンス、自動リンク、打ち消し線などを追加した方言です。

Markdownエディタを触りながら身につくこと

• Markdownはあくまでプレーンテキスト。エディタ上でも読みやすく、そのままHTMLとしてレンダリングできます。ツールバーや隠れた書式は一切ありません。
• 見出し・リスト・リンク・強調、この4つで日常の文章の9割はカバーできます。残りの1割もテーブルとコードフェンスでだいたい足ります。
• コードフェンスに言語名（ js や python など）を添えると、多くのレンダラーでシンタックスハイライトが効きます。

Markdownエディタの使い方ステップ

1. 1

   左ペインに書き始める

   見出しは #、強調は * や _、リストは - で。入力すると右ペインがその場で更新されます。

2. 2

   構造を整える

   見出し、コードフェンス、テーブルを使ってドキュメントを整理しましょう。多くのエディタには Ctrl+B や Ctrl+I といったよくある書式のショートカットも用意されています。

3. 3

   レンダリング結果を確認する

   プレビューとソースを見比べてみてください。思った通りに表示されないときは、たいてい空行が抜けているか、コードフェンスの開閉が合っていません。

4. 4

   コピーまたはダウンロード

   MarkdownのソースをそのままREADMEに貼り付けてもいいですし、HTMLをコピーしてメールやCMSなどMarkdownを解釈しない場所に貼り付けることもできます。

Markdown構文チートシート

毎日使うMarkdownの8割がここにあります。それ以外はググればすぐ出てきます。仕様書は CommonMark と GitHub-Flavored Markdown を参照してください。

試してみたいMarkdownの例

# Project Name
A short description in one or two sentences.
## Install
```bashnpm install project-name```
## Quick start
- Step 1- Step 2- Step 3

| Feature | Free | Pro ||---------|:----:|:---:|| Editor  |  ✓   |  ✓  || Export  |      |  ✓  |

- [x] Draft the post- [x] Add screenshots- [ ] Publish

Markdownでよくあるミス

• リストやテーブル、コードフェンスの前後に空行を入れ忘れるパターン。多くのレンダラーは新しいブロックを始めるのに空行が必要です。
• リスト内でタブとスペースを混在させてしまうケース。レンダラーによっては何も言わずにインデントが崩れます。
• コードフェンスの中に生のHTMLを書いてレンダリングを期待してしまう失敗。コードフェンスは *そのまま* 表示するためのものなので、これは仕様通りです。

Markdownエディタ FAQ