― Markdown All in One / Markdown PDF / Markdownlint / Paste Image 活用ガイド ―

Markdown を使って手順書を作成すると、バージョン管理がしやすく、チームでの共有もスムーズになります。しかし、Markdown だけでは「画像挿入が面倒」「書式が乱れやすい」「PDF にしたい」などの課題も出てきます。

そこで今回は、VS Code と以下の4つの拡張機能を組み合わせて、実務レベルの手順書を効率よく作成する方法をご紹介します。

1. Markdown All in One

Markdown 作業を総合的に強化する拡張機能

Markdown All in One は、Markdown の編集体験を大幅に向上させてくれる拡張機能です。

主なメリット

• 目次（TOC）の自動生成
• 見出しやリストをショートカットで素早く挿入
• プレビュー機能の強化
• スニペットでテンプレートを呼び出せる

目次の自動生成例

[TOC]

この1行を入れるだけで、文書内の見出しから自動で目次を生成してくれます。
手順書のように構造が大きくなる文書では特に便利です。

2. Markdown PDF

Markdown をワンクリックで PDF に変換

Markdown PDF は、Markdown ファイルをそのまま PDF に変換できる拡張機能です。

メリット

• 手順書を PDF として配布したいときに便利
• CSS を使って PDF のデザインを調整可能
• 画像もそのまま埋め込まれる

使い方

1. Markdown ファイルを開きます
2. 右クリック → 「Markdown PDF: Export (pdf)」 を選択します

これだけで PDF が生成されます。

3. Markdownlint

Markdown の品質を自動でチェック

Markdownlint は、Markdown の構文チェックツールです。 手順書のように長い文書では、書式の乱れが後々のトラブルにつながるため、品質管理に役立ちます。

主なチェック内容

• 見出しの前後に空行があるか（MD022）
• 先頭行が H1 か（MD041）
• リストのインデント
• コードブロックの書式

VS Code 上でリアルタイムに警告が表示されるため、きれいな Markdown を維持しやすくなります。

4. Paste Image

画像挿入を最速にしてくれる拡張機能

Paste Image は、クリップボードの画像をそのまま Markdown に貼り付けられる拡張機能です。

使い方

1. スクリーンショットを撮影します
2. Markdown に貼り付けます（Ctrl+V / Cmd+V）

すると自動で…

• 指定フォルダに画像を保存
• Markdown に ![alt](path/to/image.png) を挿入

手順書で図を多用する場合、作業効率が劇的に向上します。

実際に作成する Markdown 手順書のサンプル

4つの拡張機能を活用して作成する手順書の例をまとめました。

# システム設定手順書

[TOC]

---

## 1. 準備

- 必要なツールをインストールします  
  - VS Code  
  - 拡張機能  
    - Markdown All in One  
    - Markdown PDF  
    - Markdownlint  
    - Paste Image  

---

## 2. 初期設定

1. VS Code を起動します  
2. ワークスペースを作成します  
3. `docs/images` フォルダを作成します（画像保存用）

---

## 3. 図の挿入

1. スクリーンショットを撮影します  
2. Markdown に貼り付けます（Paste Image が自動処理します）

例：

![設定画面](images/setup.png)

---

## 4. 手順の記述

### 手順1：設定ファイルを開く
- `config.json` を開きます  
- 必要な項目を編集します  

### 手順2：動作確認
- コマンドを実行します  
- 結果を確認します  

---

## 5. PDF 出力

1. 右クリックします  
2. 「Markdown PDF: Export (pdf)」を選択します  
3. PDF が生成されます

---

## 付録

- 用語集  
- 参考資料  

スクリーンショットを取ったものを、好きな場所に貼り付けると自動で図が挿入される。

Ctrl + Shift + Vでプレビューが見れます。

上記をPDFに変換した内容

TOCが反映されない場合は手動で

TOCが反映されない場合は、以下の手順で目次が反映されます。

手順

1. Ctrl+Shift+P
2. Create Table of Contents を選択
3. Markdown 内に TOC が展開される

まとめ

VS Code と4つの拡張機能を組み合わせることで、Markdown 手順書の作成が非常に快適になります。

Markdown で手順書を作成する場合、このセットは非常に相性が良い組み合わせです。