初めに
このドキュメントでは表題の通り、VSCodeの拡張機能であるMarkdown All in One の基本的な使いかをまとめた教材になります。
Markdownについて熱く語っている記事も書いてます。
教材本文
1. 概要
Markdown All in One は Markdown 執筆を効率化するための拡張で、以下を主に提供します。
- 見出し操作 (階層アップ/ダウン)
- 強調 (太字/斜体/取り消し線) のトグル
- リスト・タスクリストの高度な補助 (Enter/Tab/Backspace などのインテリジェント挙動、番号自動調整、タスクリストのチェック切替)
- 数式 (KaTeX) 簡易トグル
- コードスパン/コードブロックのトグル
- Table of Contents (TOC) 自動生成 & 保存時更新
- テーブル整形 (GitHub Flavored Markdown)
- HTML へのエクスポート (Print to HTML)
- 画像/リンク/参照リンクなどの入力補完
2. 主なショートカット一覧
(バージョン 3.6.x 系列 package.json のデフォルト定義を基に作成。Windows と Linux は同一表記。macOS は Cmd / Option を使用。未定義は「(—)」としています。)
2.1 強調・見出し・構造
| 機能 | Windows / Linux | macOS | 説明 |
|---|---|---|---|
| 太字トグル | Ctrl + B | Cmd + B | 選択文字列を bold に / 解除 |
| 斜体トグル | Ctrl + I | Cmd + I | 選択文字列を italic に / 解除 |
| 取り消し線トグル | Alt + S | (—) |
|
| 見出しレベルを下げる (H2→H3) | Ctrl + Shift + ] | Ctrl + Shift + ] |
# を増やす (深い階層へ) |
| 見出しレベルを上げる (H3→H2) | Ctrl + Shift + [ | Ctrl + Shift + [ |
# を減らす (浅い階層へ) |
| インデント (リスト/段落) | Ctrl + ] | Cmd + ] | 選択行を右へ (Markdown All in One がリスト整形を支援) |
| アウトデント | Ctrl + [ | Cmd + [ | 選択行を左へ |
| 数式トグル (インライン/ブロック) | Ctrl + M | Cmd + M | 選択範囲を $...$ または $$...$$ に切替 (math 有効時) |
2.2 リスト & 編集支援 (Enter/Tab などの挙動)
| 機能 | Windows / Linux | macOS | 説明 |
|---|---|---|---|
| 改行 (リスト継続) | Enter | Enter | 番号やハイフンを自動挿入 |
| 改行 (段落継続/強制改行用途) | Shift + Enter | Shift + Enter | 空行を挟まず次行へ (リスト/段落整形維持) |
| 新しい行を上に挿入 (VS Code 共通) | Ctrl + Enter | Cmd + Enter | 現行行の上に行追加 (リスト文脈考慮) |
| リスト項目のインデント | Tab | Tab | リスト階層を 1 つ深く |
| リスト項目のアウトデント | Shift + Tab | Shift + Tab | リスト階層を 1 つ浅く |
| リスト項目削除整形 | Backspace | Backspace | 行頭でマーカーをスマート削除/調整 |
| 行移動 (上) | Alt + ↑ | Option + ↑ | 行を上へ。番号付きリストは再採番動作と整合 |
| 行移動 (下) | Alt + ↓ | Option + ↓ | 行を下へ |
| 行コピー (上) | Shift + Alt + ↑ | Shift + Option + ↑ | 行を複製して上に |
| 行コピー (下) | Shift + Alt + ↓ | Shift + Option + ↓ | 行を複製して下に |
| タスクリストのチェック切替 | Alt + C | (—) |
[ ] ⇄ [x] トグル (Mac はデフォルト未設定) |
2.3 プレビュー & その他
| 機能 | Windows / Linux | macOS | 説明 |
|---|---|---|---|
| Markdown プレビューを開く (VS Code 既定) | Ctrl + Shift + V | Cmd + Shift + V | エディタ横 (既定) にプレビューを表示 |
| プレビューを横に開く (別パス) | Ctrl + K V | Cmd + K V | 横に分割して表示 |
| プレビューを閉じる (同キー) | Ctrl + Shift + V / Ctrl + K V | Cmd + Shift + V / Cmd + K V | アクティブなプレビュータブを閉じる (拡張が Close を提供) |
| HTML へ出力 (コマンド) | (—) | (—) | コマンドパレット: “Markdown: Print current document to HTML” |
| TOC 作成 | (—) | (—) | コマンドパレット: “Markdown All in One: Create Table of Contents” |
| TOC 更新 | (—) | (—) | 保存時自動 (設定可) / コマンドで手動更新 |
※ (—) はデフォルトのショートカット未割当。必要なら Keyboard Shortcuts (Ctrl+K Ctrl+S / Cmd+K Cmd+S) で付与してください。
3. 代表的なコマンド (Command Palette 上の名称)
| カテゴリ | コマンド名 (表示) | 目的 |
|---|---|---|
| TOC | Markdown All in One: Create Table of Contents | 新規 TOC 挿入 |
| TOC | Markdown All in One: Update Table of Contents | 既存 TOC 更新 |
| TOC | Markdown All in One: Add/Update section numbers | 見出し番号付与/更新 |
| TOC | Markdown All in One: Remove section numbers | 見出し番号除去 |
| 編集 | Markdown All in One: Toggle code span | 行内コード `...` 付与/解除 |
| 編集 | Markdown All in One: Toggle code block | フェンスコード ``` で囲む/解除 |
| 編集 | Markdown All in One: Toggle math environment | 数式囲みのトグル |
| 編集 | Markdown All in One: Toggle list | リスト記号の候補を循環 (設定で候補変更) |
| 出力 | Markdown: Print current document to HTML | 現在ファイルを HTML に変換 |
| 出力 | Markdown: Print documents to HTML | ワークスペース複数ファイルを一括 HTML 出力 |
4. よく使う設定 (一部抜粋)
| 設定キー | 既定値 | 用途 |
|---|---|---|
markdown.extension.toc.updateOnSave |
true | 保存時 TOC 自動更新 |
markdown.extension.toc.slugifyMode |
github | 見出しアンカー生成方式 (GitHub / GitLab 等) |
markdown.extension.list.indentationSize |
adaptive | リストインデント検出モード (adaptive / inherit) |
markdown.extension.list.toggle.candidate-markers |
["-","*","+","1.","1)"] | Toggle List の循環候補 |
markdown.extension.orderedList.autoRenumber |
true | 番号付きリスト再採番自動化 |
markdown.extension.tableFormatter.enabled |
true | テーブル整形有効/無効 |
markdown.extension.bold.indicator |
** | 太字マーカーを ** か __ に変更可能 |
markdown.extension.italic.indicator |
* | 斜体マーカー * か _ に変更可能 |
markdown.extension.math.enabled |
true | 数式サポートの有効/無効 |
markdown.extension.showActionButtons |
false | エディタタイトルバーに操作ボタン表示 |
5. 演習用サンプルドキュメント雛形
以下を practice.md など任意ファイル名で新規作成し、演習で編集してください。
# Markdown All in One 練習ドキュメント
<!-- ここに自動生成される TOC を挿入予定 -->
## 1. 基本強調
太字にしたい語句: sampleBold
斜体にしたい語句: sampleItalic
取り消し線にしたい語句: sampleDelete
## 2. リスト操作
### 箇条書き
- りんご
- ばなな
- さくらんぼ
### 番号付きリスト
1. 最初
2. 二番目
3. 三番目
### タスクリスト
- [ ] 課題A
- [ ] 課題B
## 3. 数式
ここにインライン数式: E = mc^2 を予定
ブロック数式:
$$
F(x) = \int_{0}^{1} x^2 dx
$$
## 4. コード
`inlineCodeSample`
```js
console.log('Hello Markdown');
5. テーブル (後で整形)
| 名前 | 値 |
|---|---|
| A | 1 |
| B | 2 |
6. 演習課題
- 「基本強調」節で
sampleBoldを太字、sampleItalicを斜体、sampleDeleteを取り消し線に変換せよ。 - 箇条書きリストの順序を「ばなな」「りんご」「さくらんぼ」に並び替えよ (ショートカットで行移動)。
- 番号付きリストで 2. を削除し、自動再採番を確認。次に 2. を (Ctrl+Enter / Cmd+Enter) で上に空行なく挿入し再度番号調整を確認。
- タスクリストをすべて完了状態にし、その後 1 件だけ未完了へ戻す。
- 見出し
## 2. リスト操作を 1 つ深い階層 (H3) に、その後元に戻す。 - 数式
E = mc^2をインライン数式として$で囲う (ショートカット利用)。 - テーブルを整形 (| の揃え) し、列を 1 列追加 ("備考")。
- TOC (目次) を文書冒頭コメントの下に挿入し、保存で自動更新を確認。
- プレビューを開き、編集→プレビュー反映を確認後、同じショートカットで閉じる。
- HTML にエクスポートしてブラウザで表示を確認。
7. 演習模範操作手順 (ショートカット重視)
以下は Windows キー表示。macOS は基本的に Ctrl→Cmd, Alt→Option へ読み替え。
- 強調:
-
sampleBoldを選択 → Ctrl + B -
sampleItalicを選択 → Ctrl + I -
sampleDeleteを選択 → Alt + S (macOS は手動バインドが必要、無い場合は手で ~~ で囲む)
-
- 箇条書きの並べ替え:
- カーソルを「ばなな」行へ → Alt + ↑ で「りんご」の上まで移動
- 必要に応じ微調整 (Alt + ↑ / Alt + ↓)
- 番号付きリスト再採番確認:
- 行「2. 二番目」を削除 → 以降自動で 1,2 となることを確認
- カーソルを「2. 二番目 (削除後の 2 行目)」行頭に置き Ctrl + Enter で上に新行 →
2. 復活を入力 → 自動採番を再確認
- タスクリスト切替:
- 1 行目
- [ ] 課題A上で Alt + C →[x]に - 2 行目も Alt + C
- 1 行目もう一度 Alt + C で未完了へ戻す
- 1 行目
- 見出しレベル調整:
-
## 2. リスト操作行で Ctrl + Shift + ] →###に増加 - 再度 Ctrl + Shift + [ → 元の
##に戻る
-
- 数式トグル:
-
E = mc^2を選択 → Ctrl + M →$E = mc^2$になることを確認
-
- テーブル整形:
- テーブル範囲を選択 (またはカーソル内部) → 保存時/またはコマンドパレットで再整形 (拡張機能が自動整形)。列追加は行末に
|備考|を足し、ヘッダ行にも備考 |を追加後、再度フォーマット
- テーブル範囲を選択 (またはカーソル内部) → 保存時/またはコマンドパレットで再整形 (拡張機能が自動整形)。列追加は行末に
- TOC:
- コマンドパレット (Ctrl + Shift + P) → “Create Table of Contents” → 挿入
- 見出しを追加/編集後に保存 (Ctrl + S) → TOC が自動更新
- プレビュー:
- Ctrl + Shift + V でプレビュー表示
- 編集を加えてプレビュー即時反映を視認
- 再度 Ctrl + Shift + V (または Ctrl + K V) でプレビュータブを閉じる
- HTML 出力:
- コマンドパレット → “Markdown: Print current document to HTML” → 出力ファイルを確認 (workspace 内に .html が生成)
8. カスタマイズのヒント
- 取り消し線 (macOS) や タスクリストトグル を Mac でも使いたい: Keyboard Shortcuts で
markdown.extension.editing.toggleStrikethrough,markdown.extension.checkTaskListに好みのキーを割当。 - Bold/Italic のマーカーを
__/_にしたい場合: 設定でbold.indicator,italic.indicatorを変更。 - TOC を GitLab 形式に:
markdown.extension.toc.slugifyModeをgitlabに変更。 - 数式無効化 (他の数式拡張と競合する場合):
markdown.extension.math.enabledを false。
9. トラブルシューティング (抜粋)
| 症状 | 対応策 |
|---|---|
| “command 'markdown.extension.onXXXKey' not found” | Markdown ファイル初回オープン直後は読み込み待ち。解消しない場合は VS Code 再起動/拡張再インストール |
| 既存キーと競合 (例: Ctrl + B が別用途) | Keyboard Shortcuts で衝突キーを再割当。@source:default markdown.extension.editing.toggleBold などで検索 |
| 処理が重い | 他拡張を一時無効化し原因切り分け (Developer: Reload With Extensions Disabled) |
| テーブル整形が崩れる |
tableFormatter.enabled の状態と、インデント揃え / 全角文字混在を確認 |
10. 参考
- 拡張マーケットプレイス: https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
- リポジトリ: https://github.com/yzhang-gh/vscode-markdown
- VS Code Markdown 公式ドキュメント: https://code.visualstudio.com/docs/languages/markdown