Sublime Text3の便利なPackage、Markdownで記述したファイルをPreviewできる『Markdown Preview』。
GitHub flavoredも適用できるが、独自CSSをあてたかった。
どこで設定できるのか探してたところ・・・

Package Settingsがある

Preferencesには Package Settings がある。
まずは、Markdown PreviewのDefaultの内容を覗いて見ると、それらしき個所が・・・。

1
2
3
4
5
6
7

/*
  Sets the default css file to embed in the HTML

  default - Use the builtin CSS or github CSS, depending on parser config (markdown.css or github.css)
  other - Set an absolute path or url to any css file
*/
"css": "default",

なるほど。
other - Set an absolute path or url to any css file の部分が鍵で、絶対パスで指定しろと。

User用のSetting

Preferences > Package Settings > Markdown Preview > Settings-User
で表示されたファイルに以下を記述し保存。

1
2
3
4

{
  "css": "CSSファイルの絶対パス",
}
※Windowsの場合、パスの\は/に置き換えて絶対パスを書く。

注意するのは、Windowsの場合に 『パスの\（¥）は/に置き換えて』 記述すること。

自分のやった手順

自分は、フォント周りを変えたかったので、
1. chromeで表示されたPreview結果を 右クリック > 要素を検証 で開発ツールを表示
2. <style>...</style> のCSS定義をコピー
3. 自分のCSSファイルに貼付ける
4. 変更・追加を加える
5. 任意の場所に保存
6. その絶対パスを指定
これで、独自のCSSでプレビューできる。