VSコード / マークダウン記法で資料作成する時に重宝するツール

ごきげんよう、百合宮桜です。
今日は、マークダウン記法で資料作成する時に重宝するツールを紹介したいと思います。

# 画像作成ツール
私が仕事で作成する資料は、ハンズオンの手順書とかアプリの設計書とか、スクリーンショットが必要なものが多いです。よって、効率的に画像作成できるツールはとても大事✨
以下の２つを気分によって使い分けています。

## Screenpresso
みんな大好き「Screenpresso」です。
https://www.screenpresso.com/ja/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/cf154f55-d139-ab03-faaa-adb5c64965bc.png)

「見せられないヨ！」ってところにモザイクをかけたり、注目してほしいところに赤枠をつけたりが簡単にできます。
確定ボタンを押すと、そのままクリップボードにコピーされていて、Ctrl ＋ V で資料に貼り付けられるのも魅力(*'ω'*)
無償版と有償版があり、有償版には一度確定したものを再度編集する機能がついています。
有償版は買い切りで、サブスクのように月々の支払いがないので、まずは無償版で試してみて、楽しく使えるようなら有償版を買うことをおすすめします♪
ゆりみーも有償版ガチ勢です(*'▽')

## ZoomIt
プレゼンガチ勢に人気な「ZoomIt」さん！
https://learn.microsoft.com/ja-jp/sysinternals/downloads/zoomit
プレゼンテーションする時に注目してほしいところを拡大したり、赤枠をつけたりと大活躍ですが、この枠を付ける機能や矢印を表示させる機能をスクリーンショット作成にも使っています。
あくまでも一時的に枠や矢印を表示させているだけなので、編集のようなリカバリーが効きません。なので、１か所だけ赤枠をつけたいとか作業量が少ない時に使っています。
インストールや使い方は、こちらの記事が分かりやすかったです。
https://webtan.impress.co.jp/e/2015/01/27/19185

# VSコードの拡張機能
## Markdown All in One
おそらく使っていない人はいないであろう、超メジャー拡張機能ですね！
目次の作成やドキュメントの階層化など様々な機能があり、大変重宝しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/e9d67782-05a7-07c7-65e6-f53698db0130.png)

## Markdown PDF
こちらもわりとメジャーだと思います。
名前の通り、マークダウンで書いた資料をPDFにする拡張機能です。
ﾍｲｼｬｱ の資料は PDFでお客様に提供する事が多いので、秒でPDF化できるのはとても助かります！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/acb37006-5f13-738f-8717-12e7c0739eab.png)

## Paste Image
これも有名ですね。
撮影したスクリーンショットを Ctrl ＋ Alt ＋ V でマークダウン資料に貼り付けできる拡張機能です。
最初の１枚を貼り付けた時に、マークダウンが保存してある場所に画像格納用フォルダを自動生成して、その中に貼り付けた画像を保存していってくれます。
素敵なところはいくつかありますが、特に推しているのが……

- 画像の命名規則を自分で指定できる
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/20009c93-3d6e-c662-ae36-55533536c354.png)

    自分で分かりやすい名前を付けられるの嬉しいです。

- 貼り付ける時のパターンを自分で指定できる
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/a083c96c-012d-818e-8475-02e7c2c4584e.png)

    ~~~
    <img src='${imageOriginalFilePath}' width="100%">
    ~~~

    HTML でパターンを作ると、画像の大きさを調整できるのです。
    資料のクオリティが爆上がりです！

この２つが特に便利ですね！

## Excel to Markdown table
最近見つけたのですが、慣れれば便利です！
資料に表（テーブル）を載せたい……でもマークダウンでテーブルを書くのは面倒（´・ω・｀）という悩みを秒で解決できます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/f638346b-6a2c-72c5-7375-3423caa029ca.png)


あまり情報がないので、使い方も書いておきます。
1. Excel 表を書きます
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/3aa462bb-3527-e7b2-e9ce-3cf5024994fe.png)

    1セル1データで適当に作ればOKです

2. Excelに書いた表をVSコード側にコピペします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/5710fac5-aca1-4518-6037-2d163b64b1c3.png)

3. テーブル化したい範囲を選択し、コマンドパレットから「Excel to Markdown table」を呼び出します
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/94be0579-6ff7-7623-273f-6d6adaa3f079.png)

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/6c478f77-2422-e06f-4567-82531acbdb36.png)
    ※コマンドパレットは ctrl ＋ shift ＋ P で呼び出せます

4. テーブルの出来上がりです
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/c6f7127f-bd4f-c437-b403-09a900ce49f2.png)

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/15c51787-fb9f-b16e-d137-fad31e931e8f.png)

## Markdown Preview Enhanced
プレビュー時の背景色を変えてくれる拡張機能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/b98f3a9b-b782-1f97-ffcf-915c3f179016.png)

その他に色々機能はあるみたいですが、今のところ使いきれてないです(´・ω・`)
https://shd101wyy.github.io/markdown-preview-enhanced/#/ja-jp/

ゆりみー自身は、背景が黒だろうと、ピンクだろうと大して気にしないのですが💦
ﾍｲｼｬｱ資料は、PDFでご提供する関係上、白背景での見栄えも気にした方が良いかなと思って、この拡張機能を入れています。
設定の「Preview Theme」から好きな背景色を選択できます。
ゆりみーは「one-light.css」を愛用なうです！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/3b975307-80f7-6c82-0875-21f1f24d8d1a.png)

また、便利なものを見つけたら、追記していきます。
ごきげんよう(*^-^*)