VS CodeをMarkdownエディタとして使う

VS CodeでMarkdownの記事を5本ほど書いてみたら、おおよそのやり方はだいたい身についた気がする。

今日はVS CodeをMarkdownエディタとして利用する方法についてだ。

拡張機能を2つ入れて、settings.jsonを少し触るだけで終わりだ。

1. 拡張機能

Markdownを書くときに面倒な2つのことを解決してくれるパックを入れてみよう。

左側の拡張機能からmarkdownを検索する。

そして、画像にあるパックをインストールする。

ひとまずMarkdown関連の機能は、このAll in Oneさえあれば十分だ。

ボールド、テーブル、リストなど、便利な機能をたくさん提供してくれる。

Image Uploaderは画像を挿入する作業を楽にしてくれる。

本来であれば、画像をダウンロード ➡️ フォルダへ移動 ➡️ 画像リンクを挿入 という面倒な手順を踏まなければならない。

この拡張機能なら、画像をコピー ➡️ cmd+v だけで画像がフォルダ内に保存され、記事にも挿入される。

2. 使ってみる

Markdownファイルを開くと、右上にタブがもう一つ増えている。

これを押すと、右側にプレビュー画面が表示される。

文章を書きながら、その場で書式を確認できる。

ショートカットも使ってみよう。

途中の文字を強調したいときは、その部分をドラッグして cmd + b を押せばいい。

Image Uploader がものすごく便利だ。

Markdownに入れたい画像があるなら、まずコピーする。

ファイル自体をコピーしてもいいし、オンライン上でクリップボードにコピーしたものでも大丈夫だ。

そしてMarkdown上でペーストすると、記事内に挿入されると同時にフォルダにも画像が保存される。

3. .mdxで記事を書いているなら…

自分は今、Markdownの記事を.mdx拡張子で書いている。

この場合は、.vscode の settings.json を少しだけいじればいい。

{
  "files.associations": {
    "*.html": "html",
    "ostream": "cpp",
    "stdio.h": "c",
    "*.css": "tailwindcss",
    "*.mdx": "markdown", // これがポイント！
  },
  "editor.quickSuggestions": {
    "strings": "on"
  }
}

こうしておけば、.mdxファイルもMarkdownと同じように拡張機能を使える。

4. おわりに

最初はMarkdownで記事を書くことにかなり抵抗があった。

ブログは絶対にウェブエディタを使うべきだと思っていたけれど、書くことに慣れてくると、むしろウェブエディタよりも楽だ。

たくさん画像を載せても、アップロードを待つ必要がない。

画像の編集も自由にできる。

とにかく…

そういうふうに思っていたい。