ライブプレビュー付き Markdown エディターの使い方
クイック概要
Markdown を速く下書きする方法を紹介します。ライブプレビューと文字数確認、HTML コピーを README や CMS、Issue 作成に活かせます。
主なポイント
Markdown はすばやく書けますが、細かな構文ミスは README、CMS、Wiki、Issue に貼り付けるまで気づきにくいことがあります。
NeatForge Markdown エディター では、左側で Markdown を書き、右側で即座にプレビューできます。文字数、単語数、行数も確認でき、Markdown または HTML をコピーできます。
使う場面
重いドキュメントアプリを開かずに、素早く下書きしたいときに便利です。
よくある用途：
- リリースノートを書く。
- README の一部を確認する。
- CMS 記事の下書きを作る。
- 見出し、リスト、リンク、強調表示を確認する。
ソフトウェアについて書いた文章のほとんどは、どこかでレンダリングされる運命にあります。公開前にプレビューすれば、投稿後の修正往復を省けます。
毎日使う構文
Markdown を全部覚える必要はありません。実務の文書の 95% は、次の数パターンで足ります。
| 要素 | 記法 | 表示 |
|---|---|---|
| 見出し | # タイトル、## セクション | 文書構造 |
| 太字・斜体 | **太字**、*斜体* | 強調 |
| リンク | [文字](https://example.com) | クリック可能なリンク |
| リスト | - 項目 または 1. 項目 | 箇条書き・番号付き |
| インラインコード | `code` | 等幅フォント |
| コードブロック | ```lang | ハイライト付きブロック |
| 引用 | > 引用文 | 引用・注意書き |
| テーブル | | a | b | | 整列した列 |
GFM の拡張として覚えておきたい 2 つもエディターで使えます。
- 取り消し線 —
~~text~~は取り消し線付きで表示され、変更履歴(「非推奨v2 で削除」)に便利です。 - タスクリスト —
- [ ] todoと- [x] doneは GitHub の Issue や README でチェックボックスになります。
基本手順
- Markdown エディター を開きます。
- 左側に Markdown を入力または貼り付けます。
- 右側のプレビューを見ながら編集します。
- 文字数、単語数、行数で長さを確認します。
- 必要に応じて Markdown または HTML をコピーします。
実践フロー:README を書く
小さなプロジェクトの README を書くときの典型的な流れです。
1. エディターを開いて下書きを貼る。 会議メモや粗いアウトライン、前バージョンのファイルなど既存の材料から始めます。いきなり洗練された文章を目指さず、まず構造を入れます。
2. 見出しで骨組みを作る。 # プロジェクト名、## インストール、## 使い方、## ライセンス と README の区画を描きます。見出しは移動コストが低く、作業中に階層ができていく様子がプレビューで分かります。
3. コードブロックには言語タグを付ける。 インストール手順はハイライトがあると読みやすくなります。
```bash
npm install my-package
```言語タグ(bash、js、python、json)は飾りではありません。GitHub をはじめ多くのレンダラーが色付けに使い、タグなしのブロックは走査しにくい灰色のテキストになります。
4. プレビューで壊れた構文を見つける。 右ペインは入力と同時に更新され、3 種類のミスを即座に暴きます。閉じていないコードフェンス(以降すべてが等幅になる)、パイプのずれたテーブル(生テキストの 1 行になる)、閉じ括弧のないリンク([text](url がそのまま表示される)です。
5. 統計情報で分量を締める。 文字数・単語数・行数を見ながら「インストールは 100 語以内」「1 セクション 300 語まで」のような自分ルールを守ります。短い README は読まれ、長い README は流し読みされます。
6. 行き先に合った形式をコピーする。 GitHub には Markdown ソース、CMS の入力欄にはたいてい HTML が向きます。どちらもワンクリックで、余計なラッパーやスタイルの掃除は不要です。
レンダリング崩れの典型ミス
ライブプレビューが拾い、素のテキストエディターでは隠れるミスです。
リストのインデント不整合。 - item に入れ子を混ぜる場合、サブ項目には 4 スペース(または一貫したタブ)が必要です。ずれると入れ子が兄弟要素に平坦化されます。
空行の有無が効く。 見出し・リスト・コードブロックは、厳密なレンダラーでは直前に空行が必要です。text の直後に # 見出し と書くと 1 つの段落に結合されることがあり、プレビューが行き先の挙動をそのまま示します。
リンク文字内の特殊文字。 表示文字にエスケープしていない ] があるとリンクが壊れます。[array[0]](url) は描画されず、[array\[0\]](url) と書く必要があります。
テーブルには区切り行が必須。 ヘッダー直下の |---|---| がない Markdown テーブルは、テーブルにならず散文になります。
スマートクォートは Markdown ではない。 ワープロの自動修正で丸い引用符(" ")に化けると、厳密なレンダラーでは構文区切りではなく文字として扱われ、太字や斜体が壊れます。原因不明の書式崩れでは最初に引用符を疑ってください。
Word 変換ツールとの違い
このエディターは下書きとプレビュー向けです。.docx や PDF が必要な場合は Markdown & Word コンバーター を使います。
- エディター：書く、確認する、HTML をコピーする。
- コンバーター：Word または PDF を出力する。
よくある使い分けは、構造が固まるまでエディターで素早く書き、最終版の Markdown をコンバーターに貼って共有用ファイルにする流れです。創作フェーズ(高速・プレビュー付き)と納品フェーズ(非技術者向けの固定形式)を分けるのがコツです。
プライバシー
処理はブラウザ内で行われます。下書きは NeatForge にアップロードされません。
社内メモや変更履歴、ドキュメントの下書き、サポート返信など、NDA や公開 embargo 下で第三者のサーバーを通したくない内容にも向いています。ページ読み込み後はオフラインでも編集とコピーが続行できます。描画はすべてローカルの JavaScript で行われるためです。