Ⓜ️

VSCodeでMarkdownの環境を整える

2024/12/13に公開

 はじめにzennで記事をVSCodeで記述するにあたって、Markdownの環境を整備する機会が出てきたため、まとめてみます。

 環境VSCode (v1.96)

Markdown All in One (v3.6.2)

markdownlint (v0.57.0)

 基本機能
 Markdownプレビュー.mdファイルを編集している際に右上に表示される虫メガネアイコンをクリックすることでプレビュー表示できます。

(または、Ctrl + K, V)



プレビュー表示されたもの

 スニペットスニペットを使うことで、Markdownでよく使う文法をすぐ呼び出せます。

Ctrl + Spaceで使えます。

 画像の挿入、貼り付けエクスプローラータブから画像をShiftを押しながらドラッグアンドドロップすることで、直接画像を挿入することができます。
また、スクリーンショットで撮影した画像をクリップボードから貼り付けることも可能です。
https://code.visualstudio.com/updates/v1_79#_copy-external-media-files-into-workspace-on-drop-or-paste-for-markdown

 拡張機能
 Markdown All in Onehttps://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
Markdownのショートカット、自動補完などをしてくれる拡張機能です。

 ショートカット
太字、斜体、取り消し線などのテキストの編集、見出しの切り替えなどのショートカットが扱えます。

 コマンド
目次の挿入、見出しへのセクション番号の追加などができます。
F1(or Ctrl + Shift + P)を入力してコマンドパレットを開く
「Markdown」と入力
該当項目を選択する



 markdownlinthttps://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint
Markdownが既定のルールに違反している場合に、警告を表示してくれるリンターです。

また、フォーマッターとしても扱えます。

 設定settings.jsonファイルで、defaultFormatterにmarkdownlintを指定します。
 settings.json
  "[markdown]": {
    "editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
  },

 違反の解決ルール違反の文が見つかると、このように警告の波線が付きます。
このときに、警告が出ている行の上あたりに表示される電球アイコンをクリックすると、このようなものが表示されます。
一番上のをクリックして、違反を解決することができます。

 ルールの除外デフォルトの場合、結構厳しめにルールが設定されているので、許容する箇所は警告を無視するように設定できます。
Ctrl + ,で設定を開く
markdownlintと入力
Config の settings.jsonで編集 をクリック

対象のルールコードを入力して、falseを指定することで無効化できます
 settings.json
  "markdownlint.config": {
    // 複数行の改行を許可
    "MD012": false,
  }

 設定
 プレビューでの複数行改行表示markdown.preview.breaks
デフォルトの場合、プレビューにて複数行の段落が改行されずに表示されます。

個人的にはこの挙動が気に入らないので、trueに指定してMarkdownと同様の表示になるようにしています。
 markdown.md
ああああ
ああああ


falseの場合


trueの場合

 プレビューでのフォント指定などフォントファミリー
フォントサイズ
行の高さ
などを指定することができます。

 .mdファイルを開いたときに、自動的にプレビュータブを開くmarkdown.extension.preview.autoShowPreviewToSide
こちらは、Markdown All in Oneの設定です。

.mdファイルを開いたときに自動でプレビューを開けます。

 D&D時、ペースト時の画像の配置パスを指定するmarkdown.copyFiles.destination
.mdファイル内に画像をペーストなどをしたときに、画像ファイルをプロジェクトのどのフォルダ内に格納するかを指定できます。
zennの記事用プロジェクトでは、このように設定することでいい感じに画像ファイルを管理できます。
 settings.json
  "markdown.copyFiles.destination": {
    "/articles/**/*": "/images/articles/${documentBaseName}/${documentBaseName}.${fileExtName}"
  },
上記の設定をしたうえで画像を挿入すると、自動でパスが入力されて、そこのパスに画像が格納されます。
 article.md
![alt text](/images/articles/vscode-markdown-kkp/vscode-markdown-kkp-9.png)
!zennの記事を管理する場合、相対パスを指定してしまうと画像が反映されないため、

最初の..を手動で消す必要があります。

(いい感じの設定がなさそうです。)
以下の設定が有効になっている必要があります。

markdown.editor.drop.copyIntoWorkspace：D&D時のメディアファイル作成

markdown.editor.filePaste.copyIntoWorkspace：ペースト時のメディアファイル作成

 自作スニペットの追加スニペットを自分で作成することもできます。
コマンドパレットを開く
snippetと入力する

スニペット: スニペットの構成 を選択



markdownを選択して、markdown.jsonファイルを開く


編集する

 使用例 markdown.js
  "CodeBlock": {
    "prefix": "codeblock",
    "body": [
   "```$1: $2.$1",
   "$3",
   "```"]
  },

 記法スニペットの記法については、公式ドキュメントが用意されています。

変数や列挙体などを扱ったりすることができます。
https://code.visualstudio.com/docs/editor/userdefinedsnippets

 プロジェクトのみに適用できるスニペット対象のプロジェクトにのみ適用するスニペットを作成することも可能です。

スニペット: スニペットの構成 を選択

(プロジェクト名)の新しいスニペットファイルを選択


.code-snippetsファイルが作成される
これを用いて、zenn用のリポジトリにzenn独自のMarkdown記法を導入しています。
 zenn.code-snippets
  "Message": {
    "prefix": "message",
    "body": [":::message", "$1", ":::"]
  },

  "Toggle": {
    "prefix": "toggle",
    "body": [":::details $1", "$2", ":::"]
  }

 さいごに拡張性の高いVSCodeでMarkdownを利用して、いい感じにメモをしたりいい感じにドキュメントを作成しましょう～

 参考https://www.1ft-seabass.jp/memo/2024/01/29/vscode-current-markdown-copyfiles-destination-setting/