vscode、markdownプレビューcssの反映のさせ方について

Question

現在下記手順、サイトを参考にvscodeのマークダウンプレビューの背景色を白くしたいと考えています。

1. 設定（settings.json）を変更してCSSを読み込ませる
2. 指定したフォルダにCSSファイルを置く。
3. 再起動、反映

VS Code のMarkdownプレビューをCSSでカスタマイズする

#--settings.jsonファイル
  	"editor.detectIndentation": false, 
  	// ウィンドウの端で改行する
  	"editor.wordWrap": "on",
  	// 既定の改行文字 \n => Unix, \r\n => Windows
  	"files.eol": "\n",
  	// 既定の文字コード
  	"files.encoding": "utf8",
  	// 文字コードを自動で推測する
  	"files.autoGuessEncoding": false,
  	// タブのプレビュー機能を使用しない
  	"workbench.editor.enablePreview": false,
  	// インデントガイドを表示する
  	"editor.renderIndentGuides": true, 
  	// 制御文字を表示をしない
  	"editor.renderControlCharacters": true, 
  	// 自動で閉じ文字を挿入をしない
  	"editor.autoClosingBrackets": false,
  	// 折りたたみ機能を使用しない
  	"editor.folding": false, 
  	// カーソル点滅
  	"editor.cursorBlinking": "smooth",
  	// 現在行のハイライト
  	"editor.renderLineHighlight": "all",
  	// ファイルの末尾は改行で終わらせる
  	"files.insertFinalNewline": true,
  	// エディターの末尾でスクロールを止めない
  	"editor.scrollBeyondLastLine": false,
  	// 文字の区切り
  	"editor.wordSeparators": "`~!#%^&*()-=+[{]}\\|;:'\",.<>/?",
  	// スクロール量
  	"editor.mouseWheelScrollSensitivity": 3,
  	// HTML 1 行あたりの最大文字数 (0 = 無効にする)
  	"html.format.wrapLineLength": 0,
  	// ミニマップを非表示
  	"editor.minimap.enabled": true,
  	// アクティビティバーを表示する
  	"workbench.activityBar.visible": true,
  	// ステータスバーを表示する
  	"workbench.statusBar.visible": true,
  	// ブレークポイントを使用しない
  	"editor.glyphMargin": false,
  	// 配色テーマ (v1.10から設定可能)
  	"workbench.colorTheme": "Monokai",
  	// ファイルアイコンテーマ (v1.10から設定可能)
		"workbench.iconheme": "material-icon-theme",
		// マークダウンプレビューcss
		"markdown.styles": [
			"C:/Users/ユーザ名/.vscode/md_preview.css"
		]
}



#--.vscode直下にcssファイルを設置
~/.vscode/md_preview.css

この操作を行なった後に再起動してもうまく反映されません。
原因わかるかたいましたら教えていただけると助かります。
よろしくお願いします。

Comments

[mattn]

vim は関係ないのでタグから外しておいてください。

[roronoazoro]

失礼しました。修正いたしました。

Answer 1

URLエンコードはしていますでしょうか？また、下記のようなパスの形式にしなければなりません。

パスにスペースがある場合は、URLエンコードさてなければならないのでパスにスペースがある場合は下記のようになります。また、ユーザ名やディレクトリに全角文字列がある場合もURLエンコードしなければなりません。

■AAA BBB（←ディレクトリ or ファイル名）
パス：AAA%20BBB

URLエンコードは例えば下記のようなサイトでできます。
http://www.tagindex.com/tool/url.html

"markdown.styles": ["file:///Users/ユーザ名/.vscode/md_preview.css"]

Comments

[roronoazoro]

ご回答ありがとうございます。
C:→fileにしましたところ適用されました。
Macだとトップ階層がfileから始まるという解釈で大丈夫でしょうか？

[Tomak]

>Macだとトップ階層がfileから始まるという解釈で大丈夫でしょうか？

「file://」で始まるのはファイルをURLスキームで表現しているのでこうなります。フォーマットは下記になり、ホストがローカルホストの場合は「ホスト名」を省略することができます。
--
file://ホスト名/パス
file:///パス （←ローカルホストの場合）

■Windowsの場合
file:///c:/パス
file:///d:/パス
※ドライブレターを含めたフルパス（\ → / に置き換え）

■Macの場合
file:///パス

※マニュアルは下記のようになってます。
https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations

HTMLファイルを作成してダブルクリックでブラウザに開くと、URLのロケーションバーに「file:///HTMLファイルのパス」が表示されると思います。

[roronoazoro]

詳しいご説明ありがとうございます。
勉強になりました。