VSCodeでMarpの自作CSSが全く読み込まれなかった件

VSCode + Marp でMarkdown 形式でスライド作成した際に、自作CSSスタイルシートがよみこめなかったのでその際に実施したアプローチをまとめました。

前提

ワークスペース/path/to/work/下にtest_marpフォルダを作成して、.mdファイルやスタイルシートを保存しました。
階層は以下の構成になっております。

test_marp/
├── .styles/
│   └── test.css
└── test.md

test.css

/* @theme test */

@import "gaia";

test.md

---
marp: true
theme: test

カスタムCSSのファイルを指定できるようにするため、`markdown.marp.themes`でカスタムCSSの絶対PATHを指定しました。

"markdown.marp.themes": [
  "/path/to/work/test_marp/.styles/test.css",
]

エラー内容

Markdownで theme: test と自作のCSSを定義したのですが、以下のエラーのように「test」テンプレートが読み込めない事象が発生しました。

The specified theme "test" is not recognized by Marp for VS Code.marp-vscode(unknown-theme)
theme Global directive

Set a theme name of the slide deck.

You can choose from Marp Core built-in themes or registered custom themes.

Provided by Marpit framework (See more details...)

エラーの原因

エラーの原因究明のためターミナルを開き「出力」 タブを開きプルダウン「ウィンドウ」を選択することで、ウィンドウ上でmdファイルを開いた際の拡張機能の読み取りなどをデバッグすることができます。
今回はこれを活用してMarp拡張機能の挙動についてみたいと思います。

上記のやり方でデバッグしてみた結果、以下のように.cssのパスが/path/to/work/path/to/work/test_marp/.styles/test.cssとなっていたことでNotFoundにより参照できないことがわかりました。。

2023-07-08 10:52:09.401 [error] [Extension Host] EntryNotFound (FileSystemError): Error: ENOENT: no such file or directory, open '/path/to/work/path/to/work/test_marp/.styles/test.css'

原因としては、他拡張機能によるものでした。私は拡張機能Project Managerも導入しているので、
「Project Managerのワークスペースフォルダ」 + 「markdown.marp.themesの値」 がPATHとして参照されるといったことでカスタムCSSが読み込めなかったかと考えられます。。。

今回の例で言うと、Project Managerのフォルダを/path/to/work/として定義し、workフォルダ下にtest_marpフォルダを作成していました。また、markdown.marp.themesを絶対PATHとして定義していたことで、上のErrorのように/path/to/work/が2回も出力することになってました。

試しに、Project Managerを無効にしたら、今度は、絶対PATHでの書き方が良くなかったことが挙げられます。
markdown.marp.themesはmarkdown.stylesの設定に基づくため、CSSのスタイルシートは開いているエクスプローラー上からの相対PATHとしてとエクスプローラーとして解釈されてしまうからです。

その結果、「エクスプローラー上のファイルのPATH」 + 「markdown.marp.themesの値」 となるので、markdown.marp.themes の値は相対PATHにした方が良いです。

"markdown.marp.themes": [
  "./.styles/test.css",
]

したがって、① 相対PATHで記述する ② その他拡張機能によってPATHなどが変わっているか を切り分けて考える必要があります。

結論

MarpでカスタムCSSを使用する際は、以下の点に気を付けていただければエラーが起きないかと。。

• markdown.marp.themesには相対PATHを指定する。
• Project Managerを使用していない場合) Marpスライドフォルダ下にcssテンプレートを配置。
• Project Managerを使用している場合) 各ワークスペース下の所定のフォルダにcssテンプレートを配置。 or Marp用のワークスペースを別途作成。 (その他、良い案ありましたら。。)

また、拡張機能が機能しない、テンプレートが読み込めない等の場合は、VSCodeの「出力」コンソールを確認した方が良いと思います。