应通过Settings – User配置"css"数组或"html_template"路径实现自定义,前者需用绝对路径且手动刷新,后者需包含{{content}}占位符并确保HTML结构完整。

怎么改 Markdown Preview 的预览 CSS 样式
Markdown Preview 默认用的是 css/markdown.css,但这个文件在插件包内部,直接改会被更新覆盖。真要自定义样式,得走“外部引用”路径。
打开 Preferences → Package Settings → Markdown Preview → Settings – User,添加或修改 "css": 字段,指向你本地的 CSS 文件路径:
{
"css": ["/Users/you/custom-markdown.css"]
}
注意三点:
-
css值必须是数组,哪怕只加一个文件也要写成["/path/to.css"] - 路径要用绝对路径(Windows 用
C:/...,macOS/Linux 用/Users/...),相对路径不生效 - 如果用了多个 CSS(比如重置基础样式 + 自定义字体),顺序会影响层叠结果
为什么改了 css 文件,浏览器预览没变
常见原因是缓存或路径加载失败。浏览器里按 Cmd+Option+I(macOS)或 Ctrl+Shift+I(Win/Linux)打开开发者工具,切到 Network 标签,刷新预览页,看是否出现 404 或 blocked 的 CSS 请求。
另外,Markdown Preview 默认启用 enable_autoreload,但仅监听 .md 文件变化,**不监听 CSS 文件变化**。每次改完 CSS,必须手动刷新浏览器,或关掉再开预览页。
还有一个隐藏坑:html_template 如果被设定了,CSS 引用可能被模板里的 <link> 覆盖——此时改 css 设置无效,得去改模板本身。
通过 jina.ai 将网页抓取为精简的 markdown,用于在需要获取 URL 并获取压缩的 markdown 内容以节省 token。触发词 l...
如何用自定义 HTML 模板配合新样式
真正可控的方式是换整套 HTML 模板,而不是只换 CSS。在 Settings – User 里配 "html_template":
{
"html_template": "/Users/you/my-preview.html"
}
这个 HTML 文件必须包含完整结构,且至少保留 {{content}} 占位符(插件会把渲染后的 HTML 插进去)。常见写法:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>{{title}}</title>
<link rel="stylesheet" href="/Users/you/custom-markdown.css">
</head>
<body><article class="markdown-body">{{content}}</article></body>
</html>
关键点:
-
{{title}}和{{content}}是固定变量名,大小写和拼写不能错 - 模板里写的 CSS 路径,也必须是绝对路径;用相对路径(如
./style.css)会导致 404 - 如果模板里漏了
<body>或<html>,部分浏览器会渲染异常(尤其是 Safari)
MarkdownEditing 主题和 Preview 样式是两回事
很多人混淆这两者:MarkdownEditing 控制的是 Sublime 编辑器内的语法高亮(即你写的时候看到的颜色),而 Markdown Preview 控制的是浏览器里渲染出的最终效果。改 color_scheme 不影响预览样式,反之亦然。
如果你同时想调编辑区和预览区的视觉风格,得分别配置:
- 编辑区:改
Preferences → Package Settings → MarkdownEditing → Settings – User里的"color_scheme" - 预览区:改
Markdown Preview的css或html_template
最易忽略的一点:Sublime 的 font_face 和 font_size 设置(在全局用户设置里)只影响编辑区,对浏览器预览完全无效——预览字体得靠 CSS 的 body { font-family: ... } 控制。

















