【VSCode】Markdown用のCSSファイルをWindowsとLinuxで共有する

以前にGitを使ってVSCodeの設定を複数の環境で使いまわす(Win/Linux)という記事を書きました.

しばらくVSCodeを使い続けていた所,Markdown周りの機能が便利に感じたのですが,cssを設定しようとすると前回のやり方では問題が生じました.
例によってWindowsとLinuxしか試していません.Macでの方法について調べてくださる方がいますと助かります.

使用した拡張機能

• Markdown PDF (yzane.markdown-pdf)
  • Markdownファイルをpdf,html,pngなどに変換できる拡張機能です
• Markdown Preview Enhanced (shd101wyy.markdown-preview-enhanced)
  • Markdownのプレビュー機能を拡張します,こちらの記事が詳しいです

発生した問題点

• markdown.styles,markdown-pdf.styles,及びMarkdown Preview EnhancedのCSSへのパスがWindowsとLinuxで共通化しづらい
  markdown-pdfのリファレンスやVSCodeのFAQを確認した所,VSCodeにおける外部ファイルへのパスは

1. 開いているファイルからの相対パス
2. フォルダを開いていれば,ルートフォルダからの相対パス
3. ワークスペースを開いていれば,各ルートフォルダからの相対パス

となっているそうです.その為,以下のように記述した場合は,

settings.json

{
  "markdown.styles": [
    "styles.css",
  ],
}

開いているファイルやフォルダと同ディレクトリ内にcssファイルが存在しなければ適用することが出来ません.
また,次のような環境変数を用いたパス指定も使用できませんでした

settings.json(Windows)

{
  "markdown.styles": [
    "C:\\Users\\%USERNAME%\\styles.css",
  ],
}

settings.json(Linux)

{
  "markdown.styles": [
    "${HOME}/styles.css",
  ],
}

また,オンライン上のファイルを指定する場合,markdown-pdf.stylesではpdf変換時に正しく反映されないようです

settings.json(Windows/Linux)

"markdown-pdf.styles": [
  "https://xxx/markdown-pdf.css", // 一部しか適用されなかった
],

ユーザー名を含んだ絶対パスを直接記述することも可能ですが,前回の記事よりGitHubで管理するのであればなるべくそういった情報は含めないようにしたいです.
クローン後にシェルスクリプトでこの部分を追記する手法も考えたのですがGitHubにあげているsettings.jsonが不完全になっている事が気に入らなかったので却下しました.

解決案

1. markdown.styles,markdown-pdf.styles

~/ を用いた場合,ホームディレクトリからの相対パスを指定することが出来ました.

settings.json(Windows/Linux)

{
  "markdown.styles": [
    "~/styles.css",
    // "C:\\User\\%USERNAME%\\styles.css", Windowsでの解釈
    // "/home/${USERNAME}/styles.css", Linuxでの解釈
  ],
}

そして,ホームディレクトリからの相対パスが同じになるようにWindows/Linuxそれぞれでシェルスクリプトを作成します.
前回の記事で作成したwindows.bat/linux.shに追記していきます

windows.bat

rem CSSファイルのリンクを生成
mklink /H  C:\Users\%USERNAME%\styles.css %CD%\styles.css

linux.sh

# cssファイルのリンクを作成
ln -s "`pwd`/markdown_pdf.css" ${HOME}/markdown_pdf.css

Windowsでは,シンボリックリンクでは動作せず,ハードリンクにする必要があったので/Hオプションを使用しています.

2. Markdown Preview Enhancedのプレビュー機能

.mdファイルを開いている時にCtrl+K→Vで開くことができるリアルタイムプレビュー機能ですがMarkdown Preview Enhancedを導入していると,そのcssは~/.mume/style.less内で指定することが出来ます.
.lessの仕様に詳しく無いので合っているかわかりませんが,こちらは~/を用いたホームディレクトリからの相対パスが使用できなかったので,Gitでの追跡をせず,このファイルに直接シェルスクリプトで追記させるようにしました.この手法はあまり良くないと思うので他にいい方法が無いかまた調べてみます.

windows.bat

rem Markdown Preview Enhancedのcssファイルへのリンクを追記
echo @import url("C:/Users/%USERNAME%/styles.css");>>"C:\Users\%USERNAME%\.mume\style.less"

linux.sh

# Markdown Preview Enhancedのcssファイルへのリンクを追記
echo "@import url(\"${HOME}/markdown_pdf.css\");" >> ~/.mume/style.less

まとめ

とりあえずはこれでWindowsでもLinuxでも,前回通りにgit cloneから一度シェルスクリプトを実行することでMarkdown関連(正確にはローカルファイルを指定するオプション周り)の設定を実現することができました.
現在自分のVSCodeの設定間利用リポジトリはこのようになっています.便利な機能や拡張機能がありましたら,教えてくださると助かります.