VS CodeでMarkdownを導⼊する

VS CodeでMarkdownを導入する

ノウハウ

2021.01.18

何かメモを取るときに、テキスト以外の章立てや画像、箇条書きなど情報を合わせて記入できないかと探していたところ、VS CodeでMarkdownを使えば、簡単に導入できることが分かったので、そのやり方を備忘録として残そうと思います。

導入後のイメージは以下のような感じです。
右側のプレビューページをPDFやHTMLファイルにすることもできます。

事前準備

この記事では、以下の準備ができている想定です。

もし、VS Codeがインストールできていないのなら、以下のURLからインストーラをダウンロードできるので、インストールしてください。

VS CodeでMarkdownを導入する方法を記載する。

VS Codeを立ち上げて、メニューから「表示 -> 拡張機能」で、Markdown All in Oneをインストールする。

以下の拡張機能を追加すると便利

拡張機能	説明
Paste Image	Markdownへの画像貼り付けはVSCodeの拡張機能
Markdown PDF	MarkDownをPDFに変換するVSCodeの拡張機能
vscode-pdf	PDFの表示はVSCodeの拡張機能
Auto Markdown TOC	目次を見出しで作成するVSCodeの拡張機能

「Paste Image」は画像をCtrl+cでコピー中に、Markdown上でCtrl+Alt+vを行うことで、画像はMarkdownを記述しているファイルと同ディレクトリに自動で格納されて、画像を添付できる。

Markdownのプレビューができるように、以下の設定をsetting.jsonに追加する。
また、タブサイズを4文字に変更している。(デフォルトは2文字)

"markdown.preview.breaks": true,
"[markdown]": {
        "editor.tabSize": 4
},

ちなみに、Windowsだと、ctrl+,でsettingを開くことができる。