VSCode Markdown Preview Styles¶
VSCodeのビルトインMarkdownプレビューで使われるCSSスタイルのポータブル版。
ファイル構成¶
| ファイル | 内容 |
|---|---|
markdown.css | メインレイアウト・タイポグラフィ（汎用ポータブル版） |
highlight.css | コードブロックのシンタックスハイライト（汎用ポータブル版） |
safari-mylab-docs.css | iPhone Safari拡張用（mylab-docs.pages.dev専用） |
safari-github.css | iPhone Safari拡張用（GitHub.com専用） |
safari-zenn.css | iPhone Safari拡張用（Zenn.dev専用） |
元ソース¶
Microsoft VS Code/resources/app/extensions/markdown-language-features/media/markdown.cssMicrosoft VS Code/resources/app/extensions/markdown-language-features/media/highlight.css
変更点（元ファイルとの差分）¶
- VSCode固有のCSS変数（
var(--vscode-*)）を実際の色値に解決 prefers-color-schemeメディアクエリでDark/Light自動切替に対応- VSCode固有のUI要素（エディタ選択ハイライト、CSP警告等）を除去
使い方¶
HTMLで直接使う場合¶
Obsidian CSSスニペットとして使う場合¶
- 2ファイルの内容を結合して
.obsidian/snippets/vscode-markdown.cssに配置 - Obsidian設定 → 外観 → CSSスニペット で有効化
- セレクタの調整が必要な場合あり（Obsidianは
.markdown-preview-viewラッパーを使用）
iPhone Safari CSS拡張で使う場合（推奨）¶
サイトごとに専用CSSを使用。Dark/LightはiPhoneのシステム設定に自動追従。
Safari拡張アプリの選定¶
| アプリ | 特徴 | 価格 |
|---|---|---|
| Userscripts | シンプル・CSS/JSどちらも対応 | 無料 |
| Hyperweb | UIが洗練されている | 有料 |
→ まず Userscripts を試すのがおすすめ。
サイト別セットアップ¶
| 対象サイト | CSSファイル | URLパターン |
|---|---|---|
| mylab-docs.pages.dev | safari-mylab-docs.css | *://mylab-docs.pages.dev/* |
| GitHub.com | safari-github.css | *://github.com/* |
| Zenn.dev | safari-zenn.css | *://zenn.dev/* |
共通手順¶
- Safari拡張アプリをインストール・有効化
- 新規スタイルを作成し、対応するCSSの内容を貼り付け
- URLパターンを設定して保存
その他のMarkdownアプリ¶
markdown.css + highlight.css を使用。prefers-color-scheme でOSのダーク/ライトモードに自動追従。