要在vscode里打造舒服又高效的markdown写作环境，答案是通过安装核心扩展并进行个性化配置来实现；需安装markdown all in one、markdown preview enhanced、prettier和paste image等扩展，结合settings.json中的编辑器设置、自动格式化、自定义css样式及图片粘贴路径配置，利用mpe的高级渲染功能和css美化预览效果，并通过快捷键、多光标编辑和代码片段提升写作效率，最终实现流畅编辑、美观预览与高效输出的完整工作流。
要在VSCode里打造一个舒服又高效的Markdown写作环境，其实不复杂，但需要一些巧妙的设置和几个趁手的扩展。核心就是让你的编辑体验尽可能流畅，同时确保最终的排版赏心悦目，甚至能满足一些出版级的需求。这远不止是安装一个扩展那么简单，更多的是一种个人工作流的定制。
解决方案
对我来说，理想的VSCode Markdown写作环境，需要兼顾编辑时的舒适度、预览时的美观度以及写作效率。
首先，你得安装几个核心扩展：
- Markdown All in One: 这个是基石，提供了目录生成、数学公式支持、自动预览、快捷键等一系列功能。
- Markdown Preview Enhanced: 如果你对默认的Markdown预览不满意，这个扩展能让你完全掌控预览样式，支持自定义CSS，还能渲染流程图、序列图等，甚至导出为多种格式。
- Prettier – Code formatter: 虽然它主要是用来格式化代码的，但它也能很好地格式化Markdown文件，让你的文档结构保持一致，减少手动调整的麻烦。
- Paste Image: 写作时经常需要截图，这个扩展能让你直接从剪贴板粘贴图片到Markdown文件中，并自动生成链接，省去了不少麻烦。
接着，是VSCode的
settings.json
配置： 打开命令面板（
Ctrl+Shift+P
或
Cmd+Shift+P
），输入
settings.json
，选择“首选项: 打开用户设置(JSON)”。在这里，你可以添加或修改以下配置：
{ // 编辑器字体和行高，让阅读更舒适 "editor.fontSize": 16, "editor.lineHeight": 24, // 自动换行，避免横向滚动 "editor.wordWrap": "on", // 默认的Markdown预览样式，可以链接到自定义CSS "markdown.styles": [ // 示例：可以指向你的本地CSS文件 // "./custom-markdown-preview.css" ], // 开启Markdown预览的排版优化，比如智能引号、破折号等 "markdown.preview.typographer": true, // Markdown Preview Enhanced 的自定义CSS路径 "markdown-preview-enhanced.styles": [ // 示例：指向你为MPE定制的CSS文件 // "./mpe-custom.css" ], // Paste Image 插件的配置，设置图片保存路径和名称格式 "pasteImage.path": "${currentFileDir}/images", // 图片保存在当前文件目录下的images文件夹 "pasteImage.name": "${YYMMDDHHmmss}.${ext}", // 图片名称格式 // Prettier 针对 Markdown 的配置 "[markdown]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true // 保存时自动格式化 }, // 禁用默认的Markdown预览，因为我们主要用MPE "markdown.extension.preview.enabled": false }
custom-markdown-preview.css
和
mpe-custom.css
是你自定义样式的地方，可以调整字体、颜色、行距、代码块样式等等，让你的预览效果达到你想要的任何样子。
VSCode Markdown预览效果不佳？如何优化你的阅读体验？
说实话，VSCode自带的Markdown预览功能，虽然能用，但总感觉少了点什么。字体、行距、代码块的样式，都显得有点“素”，甚至有时候会觉得阅读起来不够友好。这就像你买了一辆车，但内饰是简配的，虽然能开，但总想自己动手改装一下。
要彻底改变这种状况，
Markdown Preview Enhanced
(MPE) 这个扩展是你的不二之选。它提供了极高的自由度，让你能完全定制预览的视觉效果。
核心操作是利用MPE的自定义CSS功能。在你的VSCode设置中（就是前面提到的
settings.json
），你需要配置
"markdown-preview-enhanced.styles"
这个键，指向一个或多个你自己的CSS文件。比如，我可能会创建一个名为
my-markdown-theme.css
的文件，放在我的项目根目录或者一个统一存放样式的地方。
在这个CSS文件里，你可以写任何你想要的样式规则。举个例子：
/* my-markdown-theme.css */ /* 调整整体字体和行高，让文本更易读 */ body { font-family: "LXGW WenKai", "Helvetica Neue", Arial, sans-serif; /* 尝试一些更舒服的字体 */ line-height: 1.8; /* 增加行高，减少阅读疲劳 */ font-size: 16px; color: #333; /* 深色字体 */ } /* 标题样式调整 */ h1, h2, h3, h4, h5, h6 { font-family: "LXGW WenKai", "Segoe UI", sans-serif; color: #2c3e50; /* 更深的标题颜色 */ margin-top: 2em; margin-bottom: 0.8em; } h1 { font-size: 2.2em; border-bottom: 1px solid #eee; padding-bottom: 0.3em; } h2 { font-size: 1.8em; } h3 { font-size: 1.4em; } /* 代码块样式，让代码看起来更专业 */ pre code { background-color: #f6f8fa; /* GitHub风格的背景色 */ border-radius: 6px; padding: 1em; overflow-x: auto; /* 防止代码过长溢出 */ font-family: "Fira Code", "Cascadia Code", monospace; /* 程序员喜欢的等宽字体 */ font-size: 0.9em; line-height: 1.5; } /* 链接样式，区分普通文本 */ a { color: #3498db; /* 鲜明的蓝色 */ text-decoration: none; /* 默认不带下划线 */ } a:hover { text-decoration: underline; /* 鼠标悬停时显示下划线 */ } /* 引用块样式 */ blockquote { border-left: 4px solid #ccc; padding-left: 1em; color: #666; margin: 1em 0; background-color: #f9f9f9; } /* 列表样式 */ ul, ol { margin-left: 1.5em; line-height: 1.6; }
通过这样的定制，你可以让你的Markdown预览效果从平淡无奇变得个性十足，无论是字体选择、颜色搭配，还是代码块的呈现，都能达到你理想中的阅读体验。我个人觉得，投入一点时间来打磨这个，对长期的写作体验来说是超值的。
Markdown写作效率低？VSCode有哪些提升效率的快捷键和插件？
写作效率这事儿，很大程度上取决于你对工具的熟悉程度，以及工具本身能提供的便利。如果每次都要手动输入Markdown语法，那效率肯定高不起来。VSCode在这一点上，通过一些核心扩展和内置功能，能极大地改善。
首先，
Markdown All in One
这个扩展，它的名字就说明了一切。它集成了太多实用的快捷键和功能：
- 粗体/斜体/删除线: 选中文字后，
Ctrl+B
(粗体),
Ctrl+I
(斜体),
Alt+S
(删除线)。这比手动输入
**
或
*
快多了。
- 插入链接/图片:
Ctrl+Shift+K
(链接),
Ctrl+Shift+I
(图片)。它会弹出一个小窗口让你输入链接地址和标题，非常方便。
- 标题:
Ctrl+Alt+1
到
Ctrl+Alt+6
，快速插入不同级别的标题。
- 列表:
Ctrl+Shift+L
(无序列表),
Ctrl+Shift+O
(有序列表)。
- 表格:
Alt+Shift+T
，直接生成一个Markdown表格模板，你只需要填充内容。这省去了手动对齐的痛苦。
- 目录:
Ctrl+Shift+P
后输入
Markdown: Create Table of Contents
。这个功能尤其在长文档中特别实用，能自动根据你的标题生成可点击的目录。
其次，
Paste Image
这个扩展，简直是截图党福音。你只需要截图（比如使用微信截图、QQ截图或者系统自带的截图工具），然后回到VSCode，在Markdown文件里按下
Ctrl+Alt+V
(Windows/Linux) 或
Cmd+Alt+V
(macOS)，图片就会自动粘贴到你预设的文件夹里，并且Markdown链接也自动生成了。这比先保存图片再手动拖拽或者输入链接要快上好几倍。
另外，
Prettier - Code formatter
的自动格式化功能，虽然不直接是“写作”效率，但它能帮你维护文档的整洁度。当你的Markdown文件变得很长，或者表格、代码块格式有点乱时，保存一下，Prettier就能自动帮你整理好，省去了手动调整对齐和空格的时间。这对我这种有点强迫症的人来说，简直是福音。
最后，别忘了VSCode自带的一些效率特性：
- 多光标编辑: 按住
Alt
键（Windows/Linux）或
Option
键（macOS），然后点击鼠标，可以创建多个光标。这在批量修改列表项或者表格内容时非常高效。
- 代码片段 (Snippets): 你可以自定义一些常用的Markdown结构作为代码片段。比如，如果你经常需要插入一个特定的警告框或者信息提示框，可以创建一个snippet，输入几个字母就能自动补全整个结构。
- 查找替换 (Find and Replace):
Ctrl+F
和
Ctrl+H
，配合正则表达式，可以进行非常强大的文本操作。
这些工具和技巧的结合，能让你的Markdown写作流程变得异常顺畅，减少不必要的重复劳动，让你更专注于内容的创作本身。
除了基础功能，VSCode还能如何美化Markdown排版？
谈到Markdown排版的美化，我们通常不只是指预览时的字体颜色那么简单。更深层次的美化，往往涉及到一些高级的渲染特性，以及如何让你的文档在视觉上更具表现力。这就像给一篇文章排版，除了选择字体，你可能还会考虑段落间距、图片布局、甚至是特殊元素的呈现。
一个非常强大的工具，再次提到，是
Markdown Preview Enhanced
(MPE)。它不仅仅能让你自定义CSS，它还能：
-
支持更多高级语法渲染: 比如流程图 (Flowchart)、序列图 (Sequence Diagram)、甘特图 (Gantt Chart)，甚至数学公式 (LaTeX)。这意味着你可以在Markdown文件中直接用简洁的语法绘制这些图形，而不是去外部工具制作图片再插入。这极大地丰富了Markdown的表现力。 例如，一个简单的流程图：
```mermaid graph TD; A-->B; A-->C; B-->D; C-->D;
MPE就能直接渲染出来。
-
自定义代码块高亮主题: 虽然VSCode本身有主题，但MPE允许你为Markdown预览中的代码块单独设置高亮主题。如果你想让你的代码块在文章中呈现出特定的风格，比如GitHub、Solarized或者Monokai，你可以在MPE的设置中指定。这对于技术文档来说尤其重要，能让代码示例更清晰、更吸引人。
-
导出为多种格式并保留样式: MPE可以将你的Markdown文档导出为HTML、PDF、PNG等多种格式。最棒的是，它能将你自定义的CSS样式也一并打包进去。这意味着你可以在VSCode里设计出漂亮的排版，然后直接导出成一份可以分享或打印的PDF，而无需担心样式丢失。这对于需要发布文档或者制作电子书的人来说，是解放双手的功能。
-
支持自定义容器 (Admonitions): 很多现代的文档系统都支持像“注意”、“提示”、“警告”这样的特殊信息块，通常带有图标和背景色。MPE也支持这种自定义容器。你可以通过特定的Markdown语法来创建它们，然后用CSS来美化它们的样式。这能让你的文章结构更清晰，重点更突出。
!!! note "这是一个提示" 这里是提示的内容。
通过CSS，你可以让这个“note”块有一个蓝色的边框和浅蓝色的背景。
-
字体嵌入与排版微调: 如果你对排版有极高的要求，MPE甚至支持在导出的HTML/PDF中嵌入字体，确保在任何设备上都能保持一致的视觉效果。你还可以通过CSS对行距、字间距、段落缩进等进行更细致的微调，以达到印刷级的排版效果。
在我看来，这些高级功能将Markdown写作从简单的文本记录提升到了一个内容创作和排版的层面。它让Markdown不再仅仅是“所写即所得”，而是“所写即所见，且所见即所美”。
评论（已关闭）
评论已关闭