[VSCode] Markdown Preview Enhanced で HTML 出力する際にサイドバーの目次を入れる

Thu, 20 Jul 2023 00:00:00 +0900

ずっとやり方が分からなかったのですが、英語版のマニュアルにやり方が書いてありました。

サイドバーのTOCを生成するには、VSCode の Markdown Preview Enhanced の設定でスクリプトの実行を有効にする必要があります。

尚、上記の情報は現時点の日本語版のマニュアルには書いてありませんでした。

環境

拡張機能の設定で enableScriptExecution で検索すると設定項目が表示されるのでチェックを入れます。

尚、有効にするとセキュリティリスクがありますので、その点ご注意ください。

あとはマークダウンのプレビュー画面で右クリックし、HTML に出力するだけでサイドバーに目次が出力されます。
尚、デフォルトではサイドバーは閉じた状態となっていました。
マークダウン内に toc: true を記述すると、サイドバーが開いた状態となりました。

以下サンプルです。

---
html:
 toc: true
---

# 見出し1

## 見出し2

### 見出し3

### 見出し3

# 見出し1

## 見出し2

Mon, 12 Jun 2023 00:00:00 +0900

Visual Studio Code のエディタで現在アクティブなタブの背景色が、デフォルトだと他のタブとあまり変わらなくて分かりづらいので、設定で変更しました。

メニューより、ファイル > ユーザー設定 > 設定を選択します。

設定の検索より workbench.colorCustomizations と入力し、「settings.json で編集」をクリックします。

そして、以下のように tab.activeBackground を追記します。

"workbench.colorCustomizations": {
 "tab.activeBackground": "#1b77cf"
}