ども、keita69sawada です。
　Markdownで作成するドキュメントは簡単にすばやく作成することができますが、画面キャプチャなどの画像をドキュメントに貼り付けたいとき皆さんどうしていますか？

　試行錯誤した結果、「これいいな！」と思えたのでみなさんの参考になればいいなと思い記事にしてみました。

1. はじめに

　自分はGitHubのissueにMarkDown文章を書き、最終的にPDFに変換してドキュメントを作成していました。
GitHubのissueを使っていた理由は下記３つです。

1. GitHubのissueで書くとチームメンバと共有しながらドキュメントが書ける。
2. 画面キャプチャなどの画像をコピペすることができる。
3. GitHubの認証認可によってアクセス制限ができる。（問題点あり）

　しかし、GitHubのissueに画像を張り付けると画像のURLを知っている人はGitHubのissueに貼り付けた画像にアクセスできる（３点目の課題）ことわかりました。URLが複雑になるとはいえ、セキュリティ情報（ユーザID、パスワード、IPアドレスなど）が載った画面キャプチャを貼り付けると、インターネット上に公開していることになります。

　これはセキュリティ的に非常に危険なので皆さん気を付けましょう。

※ ちなみにこれはGitHubの仕様みたいです。

　前置きが長くなりましたが、セキュアな状態で画像ファイルをコピペできる方法をここから書いていきます。

2. 前提条件

• WindowsPCである人
• Visual Studio Code がインストールされていること
• Visual Studio Code をMarkDownエディタに使用している人
• ある程度見栄えが良いドキュメントを高速で作成したい人

3. 手順

3.1. 拡張機能をインストール

• Markdown Preview Enhanced
• Paste Image　・・・　Markdownへの画像貼り付けはVSCodeの拡張機能。
• Markdown PDF　・・・　MarkDownをPDFに変換するVSCodeの拡張機能
• vscode-pdf　・・・　PDFの表示はVSCodeの拡張機能
• markdown-index　・・・　見出し(markdownの#)の番号付けはVSCodeの拡張機能
• Markdown TOC ・・・ 目次を見出しで作成するVSCodeの拡張機能

C:\>code --install-extension shd101wyy.markdown-preview-enhanced
C:\>code --install-extension mushan.vscode-paste-image
C:\>code --install-extension yzane.markdown-pdf
C:\>code --install-extension tomoki1207.pdf
C:\>code --install-extension legendmohe.markdown-index
C:\>code --install-extension AlanWalk.markdown-toc

3.2. それぞれの拡張機能を試してみる

3.2.1. Markdownへの画像貼り付け（Paste Image）

Ctrl + Alt + V で画像をMarkdownにコピペできます。

コピペされた画像ファイルは.mdファイルと同じディレクトリに格納されます。
ファイル名は下記のように「タイムスタンプ.png」でローカルPCに保存されます。

3.2.2. 見出し(markdownの#)の番号付け（markdown-index）

1. コマンドパレットを開いて（Ctrl+p）
2. >addindexと入力してEnterを押下します。

3.3. 目次を見出しで作成する(Markdown TOC)

1. 目次を挿入したい場所にカーソルを合わせます。
2. 右クリックから Markdown:TOC Insert/Update [Ctrl+M T] を選択します。

3.4. MarkDownをPDFに変換する(Markdown PDF)

1. 右クリックから Markdown PDF:Export (pdf) を選択します。
2. 作成されたPDFファイルをダブルクリックして表示します。

4. まとめ

　簡単なドキュメントを作成するのであれば、そこそこきれいに作成できるのでこれで十分です。しいて言えば、改ページが自動的にいい具合になればいいのですがさすがに厳しいか・・・

ちなみに出来上がったPDFはこちら！

そしてMarkdownはこちら。

高速でPDFドキュメントを作成！！
=====
目次
-----
<!-- TOC -->

- [1. 画像の貼り付け](#1-画像の貼り付け)
    - [1.1. 画像を張り付ける](#11-画像を張り付ける)
- [2. 見出しに自動で番号を付ける](#2-見出しに自動で番号を付ける)
    - [2.1. 目次にするといい感じ](#21-目次にするといい感じ)
- [3. 目次を作成する](#3-目次を作成する)
- [4. PDFにする](#4-pdfにする)
    - [4.1. PDFファイルを作成する](#41-pdfファイルを作成する)
    - [4.2. PDFファイルをVSCodeで確認する](#42-pdfファイルをvscodeで確認する)

<!-- /TOC -->
# 1. 画像の貼り付け
## 1.1. 画像を張り付ける
![](2018-08-09-20-56-40.png)
# 2. 見出しに自動で番号を付ける
## 2.1. 目次にするといい感じ
> :warning: 注意
> なぜか目次の最後に”。”を付けるとリンクが切れるので注意
# 3. 目次を作成する
# 4. PDFにする
## 4.1. PDFファイルを作成する
## 4.2. PDFファイルをVSCodeで確認する

少しでもみなさんに役立つといいな。
記事を見てくれてありがとうございました。