在VS Code配置Obsidian風格Markdown編輯環境

本文整理一套在VS Code中配置Markdown工作流的方法,使其在wikilink、附件管理與多媒體預覽上接近Obsidian。
未有旨在複製Obsidian的界面。重點在於讓編輯、貼圖與預覽行為盡量一致。
插件組合
建議安裝以下3類插件:
- Foam:提供wikilink解析、反向連結與檔案重新命名時的連結同步。
- Markdown Preview Enhanced:提供較完整的Markdown預覽、wikilink支援與HTML5多媒體嵌入。
- 貼圖插件:本文示例使用Markdown Image。Paste Image也能完成本地貼圖,只是設定鍵不同;如果你已經習慣Paste Image,可自行替換對應配置。
配置原則
這套做法分成兩層:
- 工作區層:放進
.vscode/settings.json與.vscode/obsidian-preview.css,讓整個專案的Markdown行為保持一致。 - 使用者層:只保留個人偏好,例如Markdown Preview Enhanced採用哪個預覽主題。這類設定不建議寫進工作區,否則容易和不同人的深色或淺色主題衝突。
工作區預覽樣式
在.vscode目錄建立obsidian-preview.css。這份樣式只處理版面與可讀性,顏色直接讀取VS Code主題變數,避免在深色模式下出現亮底預覽。
:root {
--obsidian-text: var(--vscode-editor-foreground, #2a2a2a);
--obsidian-bg: var(--vscode-editor-background, #ffffff);
--obsidian-muted: var(--vscode-descriptionForeground, #6b7280);
--obsidian-link: var(--vscode-textLink-foreground, #5b7db1);
--obsidian-border: var(--vscode-panel-border, #d7dce3);
--obsidian-code-bg: var(--vscode-textCodeBlock-background, #f5f7fa);
}
body {
margin: 0 auto;
max-width: 860px;
background: var(--obsidian-bg);
color: var(--obsidian-text);
font-family: "Source Han Sans", "Source Han Sans HC", "Source Han Sans TC",
"Source Han Sans JP", sans-serif;
line-height: 1.75;
}
code,
pre,
kbd,
samp {
font-family: Consolas, "Cascadia Code", monospace;
}
a {
color: var(--obsidian-link);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
img,
video,
audio {
max-width: 100%;
}
blockquote {
margin-left: 0;
padding-left: 1rem;
border-left: 3px solid var(--obsidian-border);
color: var(--obsidian-muted);
}
pre,
code {
background: var(--obsidian-code-bg);
}
pre {
padding: 0.9rem 1rem;
border-radius: 8px;
}
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid var(--obsidian-border);
padding: 0.5rem 0.75rem;
}
如果你不想綁定預覽字體,可以刪除body中的font-family一行。
這份CSS主要服務VS Code內建Markdown預覽,讓它在不同主題下都維持穩定的可讀性。
工作區settings.json
以下示例只保留和Markdown工作流直接相關的設定。
{
"markdown.updateLinksOnFileMove.enabled": "always",
"markdown.copyFiles.destination": {
"/**/*.md": "_resources/"
},
"markdown.preview.scrollEditorWithPreview": true,
"markdown.preview.scrollPreviewWithEditor": true,
"markdown.styles": [
".vscode/obsidian-preview.css"
],
"foam.files.exclude": [
".venv/**/*",
".vscode/**/*",
".github/**/*",
".MWebMetaData/**/*",
".git/**/*",
"**/sync.ffs_db",
"**/sync.ffs_lock",
"**/desktop.ini",
"desktop.ini"
],
"foam.files.newNotePath": "currentDir",
"foam.templates.folder": "Templates",
"foam.links.sync.enable": true,
"foam.links.hover.enable": true,
"markdown-preview-enhanced.enableWikiLinkSyntax": true,
"markdown-preview-enhanced.useGitHubStylePipedLink": false,
"markdown-preview-enhanced.wikiLinkTargetFileExtension": ".md",
"markdown-preview-enhanced.scrollSync": true,
"markdown-preview-enhanced.automaticallyShowPreviewOfMarkdownBeingEdited": true,
"markdown-preview-enhanced.enableHTML5Embed": true,
"markdown-preview-enhanced.HTML5EmbedUseImageSyntax": true,
"markdown-image.base.uploadMethod": "Local",
"markdown-image.local.path": "_resources",
"markdown-image.local.referencePath": "",
"[markdown]": {
"editor.wordWrap": "on",
"files.trimTrailingWhitespace": false
}
}
這裡有兩點需要特別說明:
markdown.copyFiles.destination控制拖放或複製附件時,VS Code內建Markdown功能使用的附件目錄。markdown-image.local.path控制Markdown Image貼圖時的儲存位置。本文使用_resources,表示圖片儲存在當前Markdown檔同級的_resources目錄。若你想改成工作區根目錄的統一附件倉,應寫成/_resources。
可選:修正Markdown Preview Enhanced中的代碼塊背景
如果你在Markdown Preview Enhanced中採用none.css之類較少干預的預覽主題,有時會遇到fenced code block背景不一致,出現整塊底色與局部小底色混在一起的情況。這時可在工作區根目錄建立.crossnote/style.less:
.markdown-preview.markdown-preview pre {
background: var(--vscode-textCodeBlock-background, #1f252d) !important;
}
.markdown-preview.markdown-preview pre code,
.markdown-preview.markdown-preview pre code *,
.markdown-preview.markdown-preview pre tt,
.markdown-preview.markdown-preview pre tt * {
background: transparent !important;
box-shadow: none !important;
}
這份樣式只影響pre中的程式碼,不會改動行內code。
可選:保留Markdown Preview Enhanced的主題選擇在使用者層
若你希望Markdown Preview Enhanced正文不額外套主題,而是盡量跟隨VS Code本身的明暗風格,可以把這類偏好放在使用者自己的settings.json中,而不要寫進工作區:
{
"markdown-preview-enhanced.previewTheme": "none.css",
"markdown-preview-enhanced.codeBlockTheme": "github-dark.css"
}
這屬於個人閱讀偏好,不屬於專案必需配置。
需按自己情況調整的項目
- 附件目錄:如果你的Obsidian附件規則不是當前檔案同級的
_resources,就同步修改markdown.copyFiles.destination與markdown-image.local.path。 - 模板目錄:如果你的模板資料夾不是
Templates,就調整foam.templates.folder。 - 忽略規則:
foam.files.exclude應按自己的vault與工作區結構增刪,不必照抄。 - 貼圖插件:如果你使用Paste Image,就把文中的
markdown-image.*配置換成對應的pasteImage.*鍵;若已切到Markdown Image,記得清理舊的pasteImage.*殘留設定。 - 預覽字體:如果你不想指定字體,可刪除
obsidian-preview.css中的font-family。
啟用方式
- 在命令面板執行
Developer: Reload Window。 - 打開任意Markdown檔案,使用
Markdown Preview Enhanced: Open Preview to the Side作為主要預覽窗格。 - 測試一次wikilink跳轉、圖片貼上與多媒體引用,確認附件路徑與預覽結果符合自己的Obsidian習慣。
完成後,VS Code即可在編輯、預覽與附件管理上提供一套接近Obsidian的Markdown工作流,同時保留VS Code本身的擴充能力與由Git驅動的版本管理環境。












