尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

VSCode + Markdown All in One:高效博客写作的完整指南

VSCode + Markdown All in One:高效博客写作的完整指南 1. 这篇博客VSCode Markdown All in One 能解决什么问题经常有朋友问我你平时写博客用什么工具 我说 VSCode 加一个 Markdown All in One 插件。对方接着就问这玩意儿到底好在哪我用 Word 写得好好的为什么要折腾这个问题其实问到了点子上。如果你只是偶尔写一两篇日记Word 完全够用。但如果你像我一样需要频繁在博客、公众号、知识库、甚至技术文档之间切换内容纯文本的 Markdown 格式才是真正能让你写一次处处用的方案。简单解释一下 Markdown 是什么它本质上就是一种极简的排版语法。你不需要在工具栏里找加粗按钮只需要在文字两侧加上两个星号**加粗**你不需要手动调整标题字号只需要在行首打上井号#。你的产物是一个纯文本文件哪怕用记事本都能打开但通过渲染器就能变成排版漂亮的网页。那 VSCode 在其中扮演什么角色它是一个免费、开源、跨平台的代码编辑器安装插件后就能变成一个非常顺手的 Markdown 写作环境。而 Markdown All in One 这个插件则是把你写 Markdown 时最常用到的操作——自动补全、快捷键、表格格式化、目录生成、列表缩进——统统打包在一起省去你到处找工具、装扩展的麻烦。如果你满足以下任何一个条件这篇文章就是为你准备的你是一个内容创作者想摆脱对某个特定编辑器网页版的依赖你是一个开发者日常需要写 README、接口文档、项目说明你是一个效率控希望所有笔记都以纯文本保存随时可以迁移、检索、备份。我会从插件的安装讲起然后一步步带你配置、使用最后分享一些我从踩坑中总结出来的经验。整篇文章完全基于实操你不必担心自己是个新手跟着走就能跑通整个流程。2. 环境准备从零装好 VSCode别在第一步翻车很多人卡在起点不是因为操作有多难而是装 VSCode 这件事上踩了不少坑。所以我单独用一节来讲环境准备把容易出问题的点都提前给你列出来。2.1 下载安装的正确姿势首先去 VSCode 官网注意是code.visualstudio.com不要随便在搜索引擎点那些长得像官网的第三方站点。官方下载页面会根据你的操作系统自动推荐对应版本Windows 用户下载.exe安装包macOS 用户下.zip或.dmgLinux 用户则对应.deb或.rpm。安装过程中有一个比较容易忽略的选项在 Windows 上安装时会让你选择附加任务。这里建议勾选如下几项添加到 PATH这样你以后可以在终端里直接输入code命令打开 VSCode将通过 Code 打开操作添加到 Windows 资源管理器目录文件上下文菜单这个很实用以后你在文件夹上右键就能直接用 VSCode 打开将通过 Code 打开添加到 Windows 资源管理器目录文件上下文菜单同样建议勾选。其他选项保持默认即可。这个设置不影响 Markdown 插件的使用但会影响你后续写代码、打开项目的顺畅程度。既然要装就一次装到位省得以后补配置。2.2 安装完成后先做两件事装好 VSCode 后别急着搜插件。先做两件事可以让你后面省心不少。第一件是设置中文界面。如果你看英文界面不难受可以跳过但如果英文对你来说有负担就按下CtrlShiftX打开扩展面板搜索Chinese安装微软官方出的Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code装完右下角会提示重启重启后就变成中文界面了。第二件是了解你的快捷键体系。VSCode 最核心的三个操作是命令面板CtrlShiftP、快速打开文件CtrlP、扩展面板CtrlShiftX。这三个快捷键是以后使用所有插件的基础Markdown All in One 的许多功能也要通过命令面板来触发先记住它们不亏。2.3 验证安装是否可用这些做完后你可以新建一个文件夹在里面新建一个文件命名为test.md。VSCode 会识别.md后缀默认进入 Markdown 预览模式吗不会它只会显示纯文本内容因为你还没装插件。不过你可以按CtrlShiftV试试看——你会发现 VSCode 本身就内置了一个 Markdown 预览功能也就是说就算你一个插件都不装VSCode 已经可以作为基础的 Markdown 编辑器来用了。这一步验证的意义在于让你分清楚哪些能力是 VSCode 自带的哪些能力是 Markdown All in One 插件提供的。很多人装了插件后觉得功能太多了不知道哪个功能是哪个插件带来的搞清边界后后面配置起来才不会一头雾水。3. Markdown All in One 的安装与核心能力拆解现在正式进入正题。打开扩展面板搜索Markdown All in One你会发现搜索结果里排第一的、下载量最高的那个通常就是我们要的。它的图标是一个蓝色的勾选框样式作者是 Yu Zhang这个名字就是背书。3.1 安装步骤安装方式很简单在扩展面板搜索到后点安装按钮几秒钟就完事。这里我建议你顺手再装两个配套插件能大幅提升体验Markdown Preview Enhanced比 VSCode 内置预览更强大的预览插件支持导出 PDF、HTML还能渲染数学公式和流程图markdownlint用来检查你的 Markdown 格式是否符合规范比如标题层级是否跳跃、行尾是否有多余空格等。不过如果你只想轻装上阵只装 Markdown All in One 也完全够用。它本身已经把写 Markdown 最需要的功能都收进来了其他的属于锦上添花。3.2 它到底提供了哪些能力很多教程一上来就罗列快捷键很容易让人产生一种错觉这些功能我现在用不上那这个插件对我没什么用。 实际上Markdown All in One 的很多能力是你在无意识中受益的平时感觉不到一旦把它关掉你立刻会浑身难受。我把它核心的能力分成五类这样你理解起来更清晰列表自动维护这是我觉得最离不开的功能。你在 Markdown 里写无序列表时按回车换行它会自动补上-写有序列表时它会自动把1. 2. 3.递增下去。最爽的是你调整列表项顺序时序号也会跟着自动修正——这在长篇文档里极其省心。表格格式化写 Markdown 表格是出了名的容易对不齐。Markdown All in One 有一个命令叫格式化表格你只要把光标放在表格里按ShiftAltF它就会自动将表格的列宽对齐让文本在源码层面对得整整齐齐。快捷键补齐加粗CtrlB、斜体CtrlI、删除线AltS、行内代码、链接、图片都有对应的快捷键。选中文字直接按快捷键即可生成对应的 Markdown 语法省去手动敲符号的麻烦。目录自动生成在文档开头输入[TOC]预览时插件会自动生成文档的目录结构并且可点击跳转。对于长文章来说这个功能可以说是救命级的。数学公式支持如果你需要写带公式的技术文档这个插件内置了 KaTeX 渲染支持你可以在 Markdown 里直接用$...$写行内公式用$$...$$写块级公式。这些功能让我在写长文时可以完全沉浸在内容本身而不是反复在排版这事上分心。后面我会挑几个最值得掌握的详细演示用法。3.3 打开预览的正确方式安装好插件后你在.md文件中按下CtrlShiftV右侧会打开预览窗口。如果想边写边看可以按CtrlK然后松开再按V这样编辑区和预览区会并排显示你改左边右边实时更新。这个双栏实时预览是我个人最推荐的写作模式。它相当于给你了一个所见即所得的体验但同时保留了纯文本编辑的全部灵活。如果你喜欢更沉浸的写作体验还可以在命令面板里输入 Markdown: Open Preview to the Side 来手动打开侧边预览快捷键同上。很多人有一个误区以为预览一定要装插件才有。刚才我提到过VSCode 自带预览支持装了 Markdown All in One 后只是在这个基础上增强了一些细节交互比如[TOC]的跳转、数学公式的渲染等。如果你不装这个插件Markdown 本身的语法也能通过默认预览正确显示。4. 核心操作实操从写标题到发布博客的完整流程这部分是真正的干货我按照一个真实博主从零写一篇文章到最终发布的完整流程来演示。你跟着做一遍比我讲一百遍抽象概念都管用。4.1 新建文章文件与编写基础语法假设你现在准备写一篇关于VSCode Markdown 博客创作的文章。先在本地建一个专门的博客文件夹命名为my-blog然后在 VSCode 中打开这个文件夹文件菜单 - 打开文件夹选择它。在文件夹里新建一个文件命名为vscode-markdown-blog.md。然后就可以开始写了# 使用 VSCode 和 Markdown 高效写博客 ## 为什么选择 Markdown Markdown 是一种轻量级标记语言... ### 优点一纯文本易维护 ### 优点二格式转换方便可以看到井号#的数量决定了标题的层级##是二级标题###是三级标题。这是 Markdown 语法的第一课也是最常用的一个操作。写到这里你按CtrlShiftV打开预览已经能看到一个结构清晰的页面了。这说明最基础的用 Markdown 写博客这件事到这里已经完成了三分之一。4.2 使用快捷键快速插入链接、图片和引用接下来你会遇到一个新的需求文章里需要插入一张配图还需要引用一段他人的话。图片的 Markdown 语法是这样的![图片描述](图片路径)手动打这个语法很麻烦不仅要记方括号和圆括号的顺序还要担心路径写错。这时你可以直接使用 Markdown All in One 的快捷键CtrlShiftL可以快速插入链接CtrlShiftI可以快速插入图片。选中文字后按快捷键插件会自动套上语法框架你只需要填内容即可。引用别人的话用的是符号 软件在过去和现在都是思想的载体工具的演化推动着表达方式的变革。在 Markdown All in One 中你甚至不需要手动敲这个符号。输入后按空格插件会自动识别并帮你维持引用块的样式换行时还会自动补上直到你连续按两次回车退出引用块。4.3 列表自动编号的妙用写过技术文档的朋友都知道Markdown 里写有序列表最难受的一点是如果你在中间插入一项后面的序号你就得手动改。但装了 Markdown All in One 后这一切都是自动的。你在写列表时只需要在行首输入1.后面无论换多少行插件都会自动补上递增序号。如果你在中间插入一条后面的序号会自动重排完全不需要你操心。实际效果是我在写这篇博客的时候列步骤只负责把内容排好完全不用管编号有没有漏写。这个体验在长文档中的价值会被无限放大。4.4 表格为什么难写以及如何快速搞定在热词里有一个非常高频的搜索词markdown表格转换excel这说明表格是很多人的痛点。标准 Markdown 表格长这样| 功能 | 快捷键 | 说明 | | ---- | ------ | ---- | | 加粗 | CtrlB | 将选中文字加粗 | | 斜体 | CtrlI | 将选中文字变成斜体 | | 删除线 | AltS | 给选中文字加删除线 |手动输入这个表格的问题是表头那一行的分隔线必须用|和-对齐一旦你改了某一列的宽度整个表格就歪了阅读代码层面时非常难受。Markdown All in One 的解法是你先随便乱写一个表格每个单元格用|分隔不用管对齐。写完后把光标放在表格任意位置按ShiftAltF插件会自动把所有列的宽度对齐到同一条竖线上。这一步我称之为表格强迫症拯救键。更进一步的骚操作是你可以在 VSCode 里用插件直接从 CSV 或 Excel 复制、粘贴表格数据到 Markdown 文件中然后用这个格式化命令一键排版。省去手工列单元格的功夫。4.5 自动生成目录长文章的导航利器当你的文章写到几千字时阅读体验最大的障碍不是内容质量而是读者翻了半天找不到想要的那部分。这时候目录TOC就是必需品。在文章开头合适位置输入[TOC]保存后预览窗口里会自动生成一份可点击跳转的目录。它的结构是从你的标题层级中自动提取的#一级标题对应一级目录##对应二级目录以此类推。有一个小细节需要注意[TOC]在 Markdown All in One 的预览中会生效但在某些第三方平台比如某些博客后台中可能不生效。如果你要发布到不识别[TOC]的平台建议用命令面板里的Markdown All in One: Create Table of Contents功能让它直接生成一份真实的、以链接形式存在的目录列表而不是留一个特殊标记。这样发布的兼容性更好。4.6 代码块、行内代码与数学公式写技术博客时代码块是避不开的。Markdown 的代码块语法是在命令行前后各加三个反引号python print(Hello, VSCode!) 反引号后面的python是语言标识预览时会做语法高亮。如果你不写语言标识预览时就没有颜色区分。Markdown All in One 对行内代码的快捷键支持是选中一段文字后按反引号键键盘左上角波浪线那个键它会自动把选中内容包裹成行内代码格式。这个操作在写文档时极其频繁建议刻进肌肉记忆。数学公式部分很多写技术博客的博主不一定用得到但如果你是理工科背景写着写着就会碰到x^2这种需求。插件支持 KaTeX 渲染你只需写行内公式$a^2 b^2 c^2$ 块级公式 $$ \int_0^\infty e^{-x^2} dx \frac{\sqrt{\pi}}{2} $$在预览中这些公式会正确渲染成数学排版效果。比起截图公式图片直接手写公式再存为 Markdown 纯文本的方式要优雅得多也更方便后期修改。4.7 导出与发布写完之后接下来的问题就是怎么变成一篇发布出来的博客。这一步各有各的门路但你至少有三个方向可选第一如果你的博客搭建在 GitHub Pages、Vercel、Netlify 这类平台直接把.md文件推送到对应仓库构建系统会自动渲染成网页。这套流程对 Markdown 的支持最完美。第二如果你用的是第三方博客平台比如 CSDN、知乎、公众号等大多数平台都支持 Markdown 编辑。你只需要把 Markdown 源码复制粘贴到后台编辑器中即可很多平台还能自动识别标题和列表结构。第三如果你需要发布到只接受富文本的地方比如某些内部系统你可以用 Markdown All in One 右键菜单里的导出功能或者配合 Markdown Preview Enhanced 插件将文档导出为 HTML 或 PDF再粘贴或上传。我个人的建议是把 Markdown 文件当作你的源文件永远保留它绝不复用平台生成的 HTML 作为唯一版本。因为 Markdown 是可逆的、可迁移的而 HTML 一旦经过某个平台的处理可能就带上了平台的特有样式换平台后还需要重新清理。这也是 Markdown 这一格式能在内容创作领域立于不败之地的根本原因。5. 踩坑记录我配置 Markdown All in One 时遇到的几个问题每个工具都有脾气Markdown All in One 也是如此。下面这几条坑是我实际使用中踩过的列出来给你排雷。5.1 快捷键冲突问题装完插件后我发现CtrlB在 VSCode 默认设置里是切换侧边栏可见性。Markdown All in One 把CtrlB定义成加粗这俩冲突了。解决方法是打开命令面板CtrlShiftP输入Preferences: Open Keyboard Shortcuts搜索加粗把 Markdown All in One 的绑定改成一个你习惯的快捷键比如CtrlShiftB再把 VSCode 默认的侧边栏切换快捷键也重新绑定到别的键上。不修改的话你会发现自己按CtrlB老是弹出侧边栏特别影响专注度。5.2 列表缩进的坑Markdown All in One 默认启用了列表自动缩进。这本来是好事但在嵌套列表里容易出现一种情况你按Tab想让某个列表项升级为子项结果插件的自动缩进把它判定成了上一个列表项的延续形成意想不到的层级。解决办法是在写嵌套列表时不要依赖插件自动缩进而是老老实实手动加两个空格或一个 Tab 来调整层级。如果你觉得自动缩进干扰太多可以打开设置Ctrl,搜索Markdown找到List Indentation相关选项把它调为最小或关闭。5.3 预览和实际渲染的细微差别Markdown All in One 的预览渲染用的是 VSCode 自带预览器它对语法检查相对宽松。但在发布到某些平台时它们自己的渲染器可能更严格或更宽容导致同一个 Markdown 文件在预览中正常、发布后出现格式错乱。比如有些平台的 Markdown 渲染要求标题的#和文字之间必须有空格而 VSCode 预览里即使没有空格也能正确识别。虽然 Markdown 规范里明确要求加空格但很多人写顺手后会省略。建议在发布前用markdownlint插件检查一遍格式它能自动标注出这类隐患尤其会提示标题后需留空格之类的规范性问题。5.4 图片路径相对路径与绝对路径写博客时插入图片路径问题经常让人抓狂。Markdown 支持两种图片路径相对路径![图片](./images/1.png)这种方式适合在本地的博客目录里使用把图片和文章放在一起整个文件夹迁移过去即可绝对路径![图片](https://example.com/images/1.png)适合图片已经上传到图床的情况。如果你在本地写文章、发布到博客平台建议优先使用相对路径。这样你的源文件在本地随时可以预览到图片。发布时如果你用的是支持图床的发布工具它会自动把相对路径替换为图床地址。想省事的话这个细节值得提前设计好否则文章写多了以后图片路径混乱会让你痛苦不堪。6. 进阶技巧让 Markdown 写作体验更顺滑到这一步你已经掌握了一个可用的写作流程。接下来我想分享几个我用了很久才摸出来的进阶技巧它们能进一步提升你的舒适度。6.1 自定义工作区样式Markdown 预览的默认样式比较朴素但 VSCode 允许你通过settings.json自定义 CSS 来美化预览。这个需求通常用 Markdown Preview Enhanced 插件来实现它能让你自定义预览主题让你的写作环境更像一个漂亮的阅读器。如果你不想追求样式而只是想让预览区域的字体、行距符合自己的阅读习惯可以在设置里搜索Editor: Font Family和Editor: Font Size直接修改全局编辑器的字体。对写作者来说一个符合自己眼睛习惯的字体比什么高级排版都重要。6.2 用任务和代码片段提升效率VSCode 支持用户代码片段Snippets你可以为文章常见的结构建立快捷模板。比如我给自己建了一个front matter模板每次新建文章时输入fm加 Tab就能自动生成--- title: 文章标题 date: 2025-01-01 tags: [VSCode, Markdown] ---这样每次起笔的格式统一后续如果要批量处理文章元信息比如导入笔记软件、发布到某个静态博客系统就会非常方便。6.3 配合 Git 做版本管理写博客和写代码一样也需要版本管理。把整个博客目录初始化成一个 Git 仓库每次有大的写作进展就提交一次。这样你可以随时回溯到之前任何一版再也不用担心误删、乱改。我通常在完成一个小节时就提交一次commit message 简单写一下这节的主题比如feat: 完成插件安装章节。后来需要整理多篇文章时用git log可以清晰看到自己每个阶段的写作脉络这比用 Word 另存版本文件的方式干净太多。7. 关于用什么工具写博客的最终建议这篇文章写到最后我想跟你分享一下我真实的使用感受。我在 Markdown 之前用过很多工具Windows 自带记事本、Word、印象笔记、Notion、各种在线 Markdown 编辑器。它们各有各的场景但最终落定在 VSCode Markdown All in One 这个组合上原因很简单它让我彻底不再操心格式所有内容都是纯文本所有排版都基于统一的语法我可以随时把内容从一处复制到另一处而不用做二次加工。如果你之前还没接触过 Markdown我建议你给自己一周的适应期。第一周你可能不太习惯觉得没有按钮可点心里发慌。但等你习惯用#表示标题、用**表示加粗之后你会发现自己的写作效率提升了不止一个档次。尤其是那些需要反复改动、重新发布的内容Markdown 的优势会被放大得非常明显。最后再分享一个小技巧写博客最重要的不是工具而是持续产出的习惯。VSCode 和 Markdown 确实能帮你扫清排版障碍但它不会替你写字。所以装好插件、配好环境后从现在开始写下你的第一篇 Markdown 博客吧。哪怕它只是一个简单的清单也足以开启你的高效写作之路。
返回列表