先聊个反直觉的事很多人以为在VS Code里写Markdown必须装一堆插件甚至专门去找Markdown编辑器下载。但你可能没注意到从VS Code诞生那天起Markdown就是它的母语。它最初就是用来写文档的而Markdown正是文档的事实标准。换句话说你安装完VS Code的那一刻就已经拥有了一款跨平台、免费、且功能相当能打的Markdown编辑器。问题只是——大部分人没把它当回事或者根本不知道原生功能藏在哪里。这篇文章我不打算写成一个VS Code Markdown功能说明书那太无聊了。我会围绕一个真实的使用场景展开如果你现在想用VS Code作为主力Markdown编辑器从安装、基础语法、预览、图片处理、导出到常见坑点排查再到哪些情况才值得装插件一条龙讲清楚。适合刚接触VS Code和Markdown的新手也适合那些已经用了一段时间但总觉得哪里不对的老用户。1. 先搞清楚VS Code的Markdown支持到底原生在哪很多人一听到原生支持第一反应是是不是有个隐藏菜单或者会不会功能很简陋。其实VS Code的Markdown能力分三层每一层都不是摆设。第一层是编辑器的底层识别。只要你打开一个以.md或.markdown结尾的文件VS Code立刻进入Markdown模式。这个模式的底层不是简单的文本高亮而是一整套语法解析系统它知道你写的哪个词是标题、哪段是列表、哪行是代码块。这种解析带来的直接好处是括号自动配对、列表自动缩进、代码块语言标注、任务列表的复选框可点击切换这些都是开箱即用的不需要任何配置。第二层是内置的Markdown预览。快捷键是CtrlShiftVWindows/Linux或CmdShiftVMac会在右侧打开一个实时预览面板。更常用的是CtrlK V这个会创建一个并排的标签页左边写、右边看光标在源码里跳到哪一行预览里就高亮到哪一段这个双向同步定位功能至今都是很多独立Markdown编辑器没有做到的。预览的渲染引擎是markdown-it跟很多主流平台的渲染规则基本一致所以你在VS Code里看到的效果粘贴到博客、GitHub、知乎上版式大差不差。第三层是工作区级别的能力。VS Code把Markdown当作一种工程资源来管理比如在文件树里拖动.md文件调整位置、多个Markdown文件之间互相链接跳转、在Markdown里运行代码片段、把Markdown文件纳入Git版本管理。这些能力叠加起来Markdown就不只是写文章而是一个可以长期维护的知识库载体。提示如果你打开.md文件后左下角显示的是纯文本而不是Markdown检查一下文件扩展名是不是被系统隐藏了或者文件本身是README这类无扩展名文件。手动点击右下角语言模式选择Markdown即可。1.1 一个被低估的内置功能Markdown源码与预览的联动调焦我见过很多人用VS Code写Markdown方式是在浏览器里开一个在线编辑器或者另外装一个Typora。问他们为什么不用VS Code自带预览回答往往是预览跟源码不在同一视线内来回看很累。实际上VS Code解决这个问题的方案很巧妙在预览面板里右键选择在源代码中显示Reveal in Source光标会瞬间跳到源码对应的那一行反过来在源码里移动光标预览会同步滚动到相应位置。这两个方向的操作配合滚动锁定写长文的时候体验非常流畅。还有一个容易忽略的设置markdown.preview.scrollPreviewWithEditor和markdown.preview.scrollEditorWithPreview这两个配置项控制双向滚动是否开启。默认是开启的如果你觉得滚动太飘可以在设置里关掉其中一项目只保留单向跟随。1.2 原生预览与所见即所得的差异别被误解带偏经常有人问VS Code的Markdown预览是不是所见即所得。严格来说不是VS Code的预览是渲染结果查看器不是富文本编辑器。你在左边写# 标题右边显示大号加粗的字但你不能在右边直接改内容。这种设计让很多人觉得不如Typora直观。但我要为这种设计说句话Markdown的价值在于源文本可版本控制、可diff、可批量处理如果你完全看不到源码等于放弃了这些能力。VS Code的模式是源码为主、预览为辅这恰恰是长期维护文档的正确姿势。你写的时候不需要实时盯着渲染效果写完一段用快捷键切过去看一眼结构就行效率反而更高。我个人写长文时源码面板占四分之三宽度预览面板缩在右侧只用来检查标题层级和图片是否正常。2. 编辑器与体验优化那些不开插件就能用到的硬核功能VS Code原生Markdown支持里藏着一批高颜值且硬核的功能这些功能如果你想在上面的H2章节里全部覆盖会很冗长但它们确实值得单独拿出来讲。2.1 任务列表的可交互勾选在Markdown里写- [ ] 待办事项会渲染成带复选框的列表。VS Code的预览里这些复选框是可以直接用鼠标点击切换状态的。这个功能的好处在于你可以直接用Markdown维护自己的待办清单、会议纪要、周报草稿不需要专门装一个待办事项应用。点击后源码里的[ ]会变成[x]文件状态跟着变配合Git提交等于拥有了一套带历史记录的GTD系统。2.2 代码块的一键运行思路很多Markdown文件里会贴代码片段VS Code对围栏代码块包起来的部分有个原生优化在预览里代码块右上角会显示一个复制按钮在源码里如果你安装了对应的语言扩展比如Python、JavaScript代码块上方会出现运行按钮。这个运行不是独立执行而是把内容发送到集成终端里跑。这意味着你可以在写技术文档的时候顺手验证自己贴的代码是不是能跑通——这个习惯能帮你避免把错误代码发出去的尴尬。2.3 快速生成Markdown表格结构Markdown表格的手写体验一直被人诟病尤其是对齐那行|---|---|很容易写错。VS Code的解决方案是在源码里选中多行文本调出命令面板CtrlShiftP输入Format Document或者使用ShiftAltF整个表格会被重新格式化对齐。更实用的是VS Code内置了Markdown: 在工作区中打开扩展的预览这类命令以及通过markdown.table相关配置控制表格的自动补全行为。默认情况下你在表格区域按Tab键光标会在单元格之间跳转这个机制让表格录入速度快很多。2.4 标题折叠与文档导航当你写完一篇长文比如万字教程左侧预览区会生成一个可折叠的目录导航大纲这个大纲是自动分析标题层级生成的。源码编辑区也有同样的能力把鼠标移到源码窗口的空白处会出现一个折叠图标点击后可以按标题折叠整个小节方便你聚焦当前正在写的部分。配合CtrlShiftO跳转到文档中的符号你可以在几十个标题之间秒跳这个操作逻辑跟IDE看代码一样写过代码的人会觉得很亲切没写过代码的人稍微习惯一下也会觉得比滚动滚轮高效得多。2.5 多光标编辑在Markdown场景下的妙用VS Code的多光标编辑按住Alt/Option点鼠标或者CtrlAltDown/Up是我最推荐新手练习的原生功能它在Markdown编辑中尤其好用。比如你有一个10行清单需要统一加上-前缀普通做法是一行一行改多光标可以一次性在每一行的行首添加。再比如你想把一段文字里所有的VS Code改成VSCode除了全局替换还可以用多光标配合CtrlD逐个选中、逐个修改精确控制哪些改哪些不改。这个功能不专门属于Markdown但它是VS Code作为编辑器而不是写作软件的核心底气。2.6 主题与自定义样式VS Code允许你通过settings.json自定义预览的渲染样式比如调整字体、行宽、代码块背景色。这个能力原生就有不需要装Markdown Preview Enhanced之类的插件。举个例子你如果不喜欢默认预览里标题太大可以这样配置markdown.styles: [style.css]然后在工作区根目录放一个style.css里面写.markdown-body h1 { font-size: 1.5em; }注意这个自定义样式只影响预览不影响源码内容所以你可以放心大胆地把它调成自己喜欢的阅读版式。3. 从零到一篇完整文章带你在VS Code里跑通全流程光知道功能不够关键是连成一条流水线。这一节我们以写一篇带图片、带代码、带表格的Markdown文章为例走一遍完整流程。你会发现不装任何插件VS Code也能完成绝大部分工作。3.1 第一步新建文件并选定语言模式打开VS CodeCtrlN新建文件立刻CtrlS保存为test.md。保存这个动作很重要因为VS Code默认会根据文件扩展名切换语言模式。如果在保存前你已经开始打字了软件会把内容当作纯文本处理Markdown语法高亮不会生效。保存后你可以通过右下角语言模式按钮确认当前是不是Markdown。3.2 第二步基础语法的录入技巧Markdown基础语法没什么神秘的#代表一级标题##代表二级标题**加粗**、*斜体*、行内代码。在VS Code里录入这些符号有几个原生小帮手输入**后直接打字最后再补两个**编辑器不会自动帮你闭合不像括号但你可以选中一段文字再按CtrlB会直接包裹成加粗输入-自动变成无序列表项回车后自动续上-连续按两下回车退出列表输入1.自动变成有序列表且自动递增序号输入变成引用块。这些规则不是VS Code发明的但VS Code的实现非常跟手几乎感觉不到自动纠正的存在。另外CtrlShiftP打开命令面板输入Markdown你能看到所有内置的Markdown相关命令比如Markdown: 全部折叠、Markdown: 打开预览到侧边。3.3 第三步图片插入的两种思路图片是Markdown写作里最常见的坑因为Markdown本身不支持上传图片它只负责引用图片。如果是本地图片推荐在项目里建一个assets文件夹把图片放进去然后在文档里写。如果图片已经在网上直接写完整的URL即可。VS Code在这方面有一个不算隐藏但很少被提及的能力在源码里直接粘贴剪贴板里的图片时如果安装了Paste Image这类插件它会自动帮你保存图片到本地并生成引用路径。但在完全没有插件的情况下你可以手动复制图片文件到项目文件夹然后按住Ctrl点击图片路径VS Code会直接打开图片预览方便核对路径写没写对。这个Ctrl点击跳转文件的能力在Markdown里对[链接文字](路径)同样生效相当于简化版的内部链接导航。3.4 第四步代码块与语言标注技术文章几乎离不开代码块。在Markdown里三个反引号包裹的内容会渲染为代码块python print(hello world) VS Code对代码块有非常贴心的原生支持你在第一个python后面回车编辑器会自动帮你补上闭合的三个反引号。更关键的是源码里代码块内的代码会按照Python语法高亮而不是Markdown的高亮规则——这是真正的语法嵌入意味着你边写代码边能发现明显的语法错误。如果你的代码块包含json、bash、sql等语言VS Code都能正确识别。3.5 第五步导出为HTML或其他格式Markdown最终要给别人看常见需求是导成HTML或PDF。VS Code原生自带Markdown: 导出为HTML命令在命令面板里搜索即可生成一个独立HTML文件样式是在线的GitHub风格CSS。这个功能虽然简单但胜在不需要装任何东西。如果你需要PDF可以用系统打印对话框Chrome/Edge打开HTML后打印为PDF或者借助VS Code内置的预览面板右键在浏览器中打开再走浏览器的打印流程。注意原生导出的HTML对图片的处理是相对路径引用如果HTML文件和图片文件夹的相对位置没保持一致图片会裂开。这一点在导出后务必检查一遍。3.6 第六步用Git给文档做版本管理这个能力是VS Code作为开发者工具的天然优势。如果你在项目文件夹里执行了git init那么每一次文档修改都可以记录版本、查看diff、随时回滚。我见过很多非程序员用户也学会了Git目的就是为了管理自己的Markdown笔记库——这比另存为副本高效太多。VS Code的源代码管理面板左侧那个分支图标提供了图形化的提交界面不需要记命令行修改文件后打开源代码管理面板输入提交信息比如增加第三章图片点击对勾提交。这套流程熟练之后你写文章会有一种每一步改动都留痕的安全感这在写长教程、写书稿、维护博客文章时尤其重要。4. 高频卡点与典型报错我实测过的排查路径热搜词里出现频率很高的几个问题——markdown换行、markdown表格复制、markdown preview enhanced 使用prince导出乱码——我全都实际踩过。这一节就集中梳理一下遇到这些问题时怎么一步步排查。4.1 换行为什么不生效——Markdown的软换行和硬换行之争很多新手第一次在VS Code里写Markdown会遇到这种情况源码里明明换行了预览里两行文字却挤在一起。这不是bug而是Markdown的规范普通换行在渲染时会被当作空格处理。要真正换行有两种方式在行尾加两个空格再回车在两个段落之间留一个空行。VS Code在源码里对行尾两个空格没有高亮提示所以这个规则容易被遗忘。我的习惯是段落内部需要强制断行时直接使用两个空格段落间的自然分段一定留空白行。这样渲染出来的排版最可控。如果你希望VS Code的预览把每个换行都当作可视换行类似Typora的换行即换行可以在settings.json里加一行markdown.preview.breaks: true但我不推荐这么干因为这种宽松模式会导致文档拿到GitHub等其他平台后排版变乱。还是老老实实遵守标准语法。4.2 表格复制粘贴后对不齐——使用原生格式化很多人在网页上看到一张Markdown表格直接复制到VS Code里发现列对不齐渲染出来一塌糊涂。原因通常是网页上的表格格式经过了压缩或者使用了不同的分隔符。处理方式很简单——全选表格区域执行一次格式化文档ShiftAltFVS Code会重排表格的管道符和分隔线。如果格式化后仍不对多半是表格内有跨行单元格或者HTML标签这类复杂表格建议手写并用原生HTML替代table trtd单元格/tdtd单元格/td/tr /tableMarkdown渲染器通常支持内嵌HTML这在处理复杂表格时是网开一面的做法。4.3 预览里图片显示正常导出HTML后图片全裂——路径策略问题这个问题的根源在于Markdown预览时VS Code会自动把相对路径从当前文件所在位置去解析所以在预览里能显示但导出的HTML文件如果移动了位置相对路径就失效了。排查思路检查HTML文件和assets文件夹是否在同一层级检查图片路径里有没有中文或空格有的话建议重命名如果你用的是绝对路径/Users/xxx/...HTML换机器基本失效长期维护强烈不建议。我个人最稳妥的方案是把所有图片放在项目根目录的assets文件夹文档里的引用统一写成然后整个项目文件夹整体移动或压缩打包。只要assets和xxx.md的相对位置不变图就不会裂。4.4 Markdown Preview Enhanced导出乱码——字体与编码之谜热搜词里markdown preview enhanced 使用prince导出乱码是一个插件场景但我在这里也要提一下因为它的排查思路对原生预览也有借鉴意义。乱码通常出现在导出PDF时可能原因有PDF渲染引擎如Prince不支持当前字体中的中文字符需要下载中文字体并指定HTML文件本身是UTF-8编码但导出时未在HTML头中声明meta charsetutf-8操作系统区域设置导致默认字体映射异常。排查顺序先用原生导出为HTML再用浏览器打开这个HTML看中文是否正常。如果HTML正常而PDF乱码问题几乎可以锁定在PDF引擎的字体配置上而不是Markdown内容本身。4.5 预览中的Mermaid图表无法显示——确认你的VS Code版本Mermaid一种用文本定义流程图的语法在Markdown里长这样mermaid graph TD; A--B; VS Code的预览原生支持Mermaid渲染前提是你的VS Code版本足够新2022年下半年之后的版本都带了。如果你的预览里mermaid代码块只是普通代码而不是图形建议先检查版本帮助-关于。版本号低于某个较老版本时升级即可。这里要特别说明这个能力不需要装Markdown Preview Mermaid Support插件它已经内置了。5. 哪些情况才值得装插件一份克制而不盲目的补强清单说完了原生能力我得诚实地说一句VS Code原生的Markdown支持已经覆盖了80%的需求剩下的20%才需要插件。很多人一上来就装七八个Markdown插件结果互相冲突预览样式混乱反而浪费了时间。我推荐的策略是先只用原生功能写作一两周遇到真实痛点了再有针对性补插件。5.1 什么时候不需要插件如果你的需求是记笔记、写博客文章、写README、整理日常待办且不需要复杂的图片上传、不需要自定义渲染引擎、不需要静态站点生成那么原生完全够用。我自己维护一个纯Markdown知识库用了很久只装了极少数辅助工具。原生功能的一个最大优点——零额外依赖意味着你的文档在任何装了VS Code的电脑上打开体验都是一致的这比装上某个插件才能完美显示重要得多。5.2 值得考虑的原生增强插件Markdown All in One如果你觉得原生体验还有提升空间最值得装的是Markdown All in One它提供列表自动补全、表格格式化和文档目录生成等功能。注意它的功能大多是对编辑体验的增强不改变渲染逻辑所以基本不会跟原生预览产生冲突。5.3 静态博客与图片托管场景Markdown Preview Enhanced如果你用Markdown维护个人博客需要更复杂的导出能力比如导出PDF、Puppeteer渲染、自定义预览主题这时候Markdown Preview EnhancedMPE会是更好的选择。但如前所述MPE的导出乱码坑需要额外配置装上之后建议花半个小时专门测试一次中英文混合内容的PDF导出别等到要交稿了才临时抱佛脚。5.4 关于Chrome查看Markdown插件的题外话搜索词里有一条chrome 查看markdown插件这反映了很多人经常在浏览器里打开Markdown文件。这里多说一句Chrome原生不渲染Markdown一般有两条路——安装浏览器扩展比如Markdown Viewer直接把本地.md文件拖进浏览器或者最简单的方式在VS Code里CtrlShiftV预览后浏览器打开本地HTML文件。如果你的需求只是快速看一下”我推荐后者不用给浏览器多装一层东西。5.5 踩过的坑插件与原生预览冲突的表现有一次我装了一个自定义主题类的Markdown插件结果原生预览里所有代码块都不高亮了排查了半天才发现是插件的CSS把.markdown-body pre的样式覆盖了。这种冲突不是功能报错而是样式污染最隐蔽。排查方法很简单禁用所有Markdown相关插件恢复原生状态对比一下。如果原生正常再一个一个启用插件直到找到元凶。后来我的经验是非必要不装任何带自定义CSS的Markdown美化类插件预览样式可以通过markdown.styles自己控制主动权在自己手里。6. 一个被我反复使用的进阶场景用VS Code打造个人Markdown知识库最后分享一个我的日常用法算是把以上所有能力拧成一股绳。这个用法不需要额外插件只需要VS Code外加一个文件夹。我为我自己的知识库建了一个文件夹比如叫my-notes里面按主题分子文件夹web、python、life、book-notes。所有笔记都是Markdown文件。在知识库根目录用Git初始化每次增删改查都有迹可循。写新笔记时我遵循三条约束所有图片相对路径引用放在同目录下的assets里同一主题的文件之间用[别名](其他文件.md)互相链接VS Code原生支持Ctrl点击跳转所有文件名用英文小写加连字符不出现空格和中文避免跨平台兼容问题。在阅读一篇长笔记时我用CtrlK V开启侧边预览配合大纲折叠定位章节。在整理多个文件时用CtrlShiftF全库搜索关键字直接定位到对应文件。这套工作流让我彻底摆脱了对专门笔记软件的依赖因为任何一款独立笔记软件在完全控制文件格式、不会被厂商锁定这件事上都比不上纯Markdown 一款可编程编辑器的组合。如果你也有大量碎片化知识要沉淀可以试试从今天开始用VS Code建一个自己的Markdown知识库。先从一篇笔记开始不要着急搭各种复杂结构用得顺手了再一步步加目录、加标签、加Git版本管理。Markdown的语法十分钟就能学会而VS Code的这套原生流程值得你花一个下午把它玩透。