はじめてのmarkdown ～ VSCodeで入門する ～ インストール編 2021年春

# 1. はじめに
markdownは、簡易文書の作成効率化に極めて効果的です。 開発、製造、などに限らず、行政でも効果的だろうと思います。特に、VSCode(ブイエス コード)は、文書作成にとても有効です。超初心者向けmarkdown入門として、今回は、VSCodeのインストール方法について説明します。

# 2. インストール（オンライン)

パソコンがインターネットに接続されている場合はここの章を参考にしてください。インターネットに接続されてない場合は、次の章を参考にしてください。

下記のページにアクセスしダウンロードをクリックします。

https://code.visualstudio.com/

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/ca07cafd-a3f6-03b2-6572-0fe1cd072007.png)

しばらくすると、勝手にダウンロードが始まります。終わったらその部分をクリックして実行します。

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/7a49507c-e297-dad2-f26f-85e93c3c9b4a.png)

ライセンスの同意確認で、同意するを選択して、次へ（図ではNext)をクリックします。

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/a8c5f5cc-cc06-5805-08bd-ba92e06dbbfc.png)

色々と質問されますが、次へ（図ではNext)をクリックします。

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/add66323-57ea-cc7e-7801-1e219398c31a.png)

この画面が出るまで、次へをクリックし、ここで、Codeで開くをエクスプローラのコンテクストメニューに加えると、サポートするファイルを関連付けるにチェックを入れましょう。今回は触れませんが、色々と便利な場面があります。

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/3cae73b5-b011-b714-6a68-ae16aafb038e.png)

この画面が出たら、インストールをクリックします。

![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/385bd38f-498e-159f-ca53-abe07d312737.png)

インストールが終了し、Visual Studio Codeを起動します

![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/277b8c6d-77c6-3fe1-a026-5c4fe8b335e9.png)

起動すると次のような画面が出ます。これが、VSCodeです。
![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/ece67d63-9e1b-d9db-edd8-7e53def38a6d.png)

VSCodeの画面の右側にある、 四角が3つと1つあるアイコンをクリックし、左上の枠に、markdownと入力すると、Markdown All in One というのが一番上に出てくるはずです。このインストールボタンを押します。

![25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/29aaa65b-7f43-9bea-a3d2-7e02e1848b16.png)

また、この下にある、```Markdown PDF```も、インストールしてください。出力する際に利用します。

この後、フォントのインストールと作図ツールのインストールも紹介しますが、こちらは任意です。次の章を参考にしてください。

# 3. インストール（オフライン）

パソコンが、インターネットに繋がって無い場合、インターネットに繋がっているPCで アプリをダウンロードして、そのファイルを目的のパソコンにコピーして、インストールする必要があります。 少し面倒ですが、1度やってしまえば、大丈夫ですので頑張りましょう。

## 3.1. ダウンロード

### 3.1.1 VSCodeのダウンロード
https://code.visualstudio.com/#alt-downloads

![dlvscode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/233811ee-f783-738c-608a-12d3ec82f251.png)


### 3.1.2 拡張機能のダウンロード

#### 3.1.2.1. Markdown All in Oneのダウンロード

下記からダウンロードします。まずは下記をクリックします。すると拡張機能のページが出ますが、Installボタンは押しません。

https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

この図にある、右下の Download Extension という部分をクリックして、ファイルをダウンロードします。

![dlExtMaio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/0482d456-4f23-af76-d505-7a11190253b7.png)


#### 3.1.2.2. Markdown PDF のダウンロード

先ほどと同じ要領で、下記を開き、右下の Download Extension という部分をクリックして、ファイルをダウンロードします。

https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf


### 3.1.3. google chrome のダウンロード

これは、Markdown PDFが機能するために必要です。 もし、対象のパソコンにgoogle chromeが既にインストールされているのであれば、ここは必要ありません。
下記をクリックしてファイルをダウンロードします。（[参考](https://qiita.com/kota344/items/278e9f28e8ff52289157)）
https://www.google.com/chrome/?standalone=1&platform=win64

右上にあるダウンロードではなく、中央にあるダウンロードボタンをクリックし、数秒待ちます。ダウンロードされない場合は、「ダウンロードが開始されない場合」をクリックします。

### 3.1.4. 隆男フォント(任意)

フォントが豊富であれば良いのですが、あまり無い場合、次のフォントをお勧めします。

https://launchpad.net/takao-fonts

右中央付近にある緑色の TakaoFonts_00303.01.zip をクリックしてダウンロードします。

![dlTakao.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/92ca4a23-79ba-e3f0-cbe5-94665a156c28.png)

### 3.1.5. drawio(任意)

作図するのに便利なツールです

https://github.com/jgraph/drawio-desktop/releases/

画面中央にある windows Installer をクリックしてダウンロードします。

![dldrawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/f8ab6df7-2168-b10c-96cb-12e4ba16ac0c.png)


## 3.2. インストール

ダウンロードしたファイルは、USBメモリや共有フォルダ経由、もしくは管理者や管理部門に渡して、導入したいパソコンに移動します。

### 3.2.1. VSCodeのインストール

VSCodeのインストール方法については、上の第二章を参考にしてください。同じです。

### 3.2.2. 拡張機能Markdown All in One のインストール

まずは、左側の四角が3つと1つ外れた四角が描かれているアイコンをクリックします。
その左脇に現れたメニューで、... と点3つあるアイコンをクリックし、
現れたメニューの一番下にある Install from VSIX...をクリックします。

![ext01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/87a9745b-bf1b-8399-b28b-2018df61fe1b.png)

ダウンロードしておいたファイルyzhang.markdown-all-in-one-数字.vsixを選び、インストールをクリックします。
![ext02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/10a0d173-edd0-0f7a-ddae-40242a59a06c.png)

インストールが完了すると、左側に Installedという項目の下に、現れます。これでOKです。

![ext03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/cd01fa19-4e8c-80e6-fcfd-0258bb4ffcff.png)


### 3.2.3. google chromeのインストール

もし、google chromeがインストールされているのであれば、ここは不要です。
google chromeのインストールファイルを実行し、インストールを行います。途中、フォルダを質問されますが、そのままNextをクリックすれば良いです。
![chrome01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/81e10989-46bd-ced8-3c22-ceab3769a1c6.png)
インストールが完了すると、ブラウザが立ち上がります。
![chrome02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/746e5672-4ea1-ef10-6acc-158c8c6d4058.png)

google chrome自体は使う事が無いですが、どこにインストールしたのか？という情報は必要になります。後で手順を説明します。


### 3.2.4. 拡張機能Markdown PDF のインストール

文書をpdf化する拡張機能をインストールします。先ほどと同じように、左側の四角が3つと1つ外れた四角が描かれているアイコンをクリックします。
その左脇に現れたメニューで、... と点3つあるアイコンをクリックし、
現れたメニューの一番下にある Install from VSIX...をクリックします。

![ext04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/e4ac8313-0c51-947b-b9b3-5edaf4c6d6ab.png)

今度は、 yzane.markdown-pdf-数字.vsix を選択し、インストールボタンをクリックします。

![ext06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/07bb1424-0a7d-10d2-69cf-eff991ce3a0d.png)

次に、上のメニューバーの File から、 Preference から、Settings をクリックします。

![ext08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/5ae2352d-fdfb-fb6e-c149-3b4e2bf53c81.png)

現れた枠に、 markdown-pdf.ex と入力します。ここまで入力すると、左下に、
Markdown-pdf: Excutable Path という項目が現れます。
この枠に、google chromeがあるフォルダを記載します。
一旦、VSCodeを最小化しましょう（閉じないでください）。

![ext09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/40577135-760d-4cca-771d-1a16703cbd1a.png)

google chromeのありかを調べるには、デスクトップ上にあるアイコンを右クリックし、現れたメニューの一番下にある、プロパティ をクリックします。
すると、プロパティウインドウが開きますので、ターゲットの枠にある文字をダブりクリックして、全部を選択した状態で、その文字の上で右クリックし コピー を選択します。

![chrome04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/f67c2bea-15e1-23ce-60c6-d6e55cc259da.png)

再度、タスクバー（下にあるアイコン群）のVSCodeのアイコンをクリックして、再度表示します。
枠をクリックして、右クリックし、ペーストを選びます。
ペーストされた際に、”（ダブルコーテーションという記号です）が付いていたら、削除します。

![ext10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/23d3ae1f-a45e-f270-f3c6-db8c75901e02.png)

以上、設定が終わったら、一回、VSCodeを閉じて、再びVSCodeを起動しましょう。

![ext11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/4e244729-4b46-d651-de80-ba2a55463eae.png)


# 4. 変な漢字が出た時のちょっとした設定

希に、次のように文章を打ち込むと、不思議な漢字が表示されるパソコンがあります。
令和の令が、筆記体のような文字になっていたり、直という字のへんの部分が消えている文字になっていたりします。この現象を解消する設定を説明します。

![ext12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/8fc40a6e-98ed-5f6d-eff2-ecb853d93155.png)

ダウンロードした隆男フォントのファイルをダブルクリックして、TakaoGothic.ttfなどが現れるところまで、フォルダを開いていきます。
そして、ttfファイル4つを選択して、デスクトップなどにコピーします。

![font01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/d24193d9-fbed-7fac-a2cf-568c5737b9d8.png)

ここからは1つずつインストールします。隆男フォントのファイル1つの上で右クリックすると、メニューに、全員にインストール という項目があります（なければ、インストール の項目） 。これをクリックします。

![font02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/d6ea8d35-eaa9-0b56-b119-667e3e231dad.png)

途中、フォントをインストールしているウインドウが出ます。完了すると消えます。同様に残りの3つのフォントをインストールします。

![font03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/38260cc8-eb20-a0b7-43f7-35475f7b5c15.png)

インストールが終わったら、VSCodeを立ち上げ、上のメニューバーの File から、 Preference から、Settings をクリックします。

![ext08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/5ae2352d-fdfb-fb6e-c149-3b4e2bf53c81.png)

出てきた枠に、 font と入力すると、
Editor: Font Family という項目が現れるので、その枠の先頭に、
TakaoPGothic, と追記します。(最後のカンマを忘れずに)
追記したら、VSCodeを一旦閉じます。何かファイルを作っていた場合は閉じる前に保存しましょう。

![ext14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/20b109ad-050a-7b75-181a-40b36b22b882.png)



# 5. 動作確認

次の文字を入力して、rep210508.mdというファイル名で保存してみてください。
先頭の3行ががちょっと面倒ですが、1度入力すると、使い回しができます。

```markdown
<style>
 body {font-family: "TakaoPGothic","Meiryo";}
</style>
令和

直角
```
入力した領域どこでも良いので右クリックしてみます。そのメニューに Markdown PDF:Export (pdf )という項目があるはずです。これをクリックします。
![ex01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/0fd7d4c2-4afc-3cf2-0b65-85be6bdfa1e7.png)

30秒ぐらいすると、ファイルを保存した場所にpdfが出来上がっています。ダブルクリックして、これを見てみましょう。このようなものが表示されていればOKです。

![ss 2021-05-09 0.19.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/3465ec74-4330-3928-d1b4-775649289135.png)

もし、次のような変な漢字になっている場合は、
- 隆男フォントがインストールされてない
- 冒頭のTakaoPGothicという文字が間違って入力されている
ということが考えられます。

![ss 2021-05-09 0.19.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/8aa08692-e2a8-a2ba-5e5e-bc818b0ea812.png)

なお、次の3行だけ(先頭の3行を省いて)入力した場合も、変な漢字でPDFが生成されることが多いです。
```markdown
令和

直角
```

# 6. おわりに

markdownの文書を作成する場合、VSCodeはとても便利です。オフラインのインストールは少々面倒かもしれませんが、一度行えば、後はとても便利な状態で文書を作ることができます。オフラインのＰＣに利用する場合は、このページもファイルに保存して、そのＰＣに移すと楽かもしれません。