【VSCode】Markdown拡張機能おすすめ

Visual Studio CodeエディタでMarkdownを記述する際に導入すべき拡張機能を紹介します。

Markdownで記述に慣れていないと入力する際、毎回調べながら入力するので時間がかかります。

そんなときのお助け機能を紹介します。

1.Docs Authoring Pack

Alt+Mのショートカットキーで入力候補Windowから
ひな形を選択して入力できます。

エディタ上で「Alt+M」を入力すると以下のWindowが表示されます。

自分が入力したものを選択して入力することができます。

表などは雛形で「縦：横」の行数と列数を指定することでサンプルが出力されるので、後は自分で編集すれば表が完成します。

2.Paste image

クリップボードに保存した画像をペーストして貼り付けることができます。

画像を挿入を簡単にできるようになります。

Ctrl + Alt + v でクリップボードの画像を貼り付けてくれます。

画像はmarkdownのファイルと同じ場所に保存されています。

3.Markdown All in One

ショートカットキーでMarkdownに変換してくれます。

WordやExcelのショートカットキーと似ているので直観で使えます。

キー	説明
Ctrl+I	イタリック
Ctrl+B	太字
Ctrl + Shift + ]	見出しの切り替え(アップ)
Ctrl + Shift + [	見出しの切り替え(ダウン)
Alt + C	チェックボックスの有効/無効
範囲選択 + Ctrl + V	リンクの設定

4.Draw.io Integration

以下のような感じでDraw.ioのアプリと同じようにVSCode上で図形を描画・編集できます。

拡張子を.drawio.svgまたは.dio.svgにしてファイル作成すると、Draw.ioに関連付けられ、svg形式のファイルを作画＆作成できます。

そしてさらに、mdファイルにこのファイルを組み込むことができます。

ファイルを画像形式で出力しなくてもよいので、VSCode上で修正や変更が容易にできます。

※Ctrl + クリックで対象ファイルを開いて編集できるので、VSCodeで容易に修正可能

UML、ER図、データフローなどもテンプレートにあるので、設計書の作成にもおすすめです。

Draw.ioの中で画像の挿入が可能

[配置] → [挿入] → [イメージ]を選択
または、画像をドラッグ＆ドロップで挿入できます。

注意!画像はbase64でエンコードされた情報が保存されている（ファイルサイズが大きくなるので注意）

5.まとめ

1. Docs Authoring Pack
2. Paste image
3. Markdown All in One

この３つの拡張機能を入れることでほぼ知識ゼロからでもそれなりのMarkdownでやりたいことは記述できるようになります。

4. Draw.io Integration

これで図形も容易に挿入できるようになるので、図形を描く人はぜひこれも入れて活用ください。

その他にもいろいろなものがあるので、必要に応じて追加しましょう。

Markdown記述チートシート

を参考に一通りどんなことができるのか参照しておくと良いかもしれません。

以降にMarkdownの記述に関するおすすめのリンク集を載せておきます。

6.Link

Markdownの記述方法のおすすめリンク集です

Markdown記述チートシート

Markdown記述例

絵文字を表示する

※GitHub上なら絵文字が表示される