VSCode设置Markdown写作环境(实用技巧，排版美化指南)-VSCode-PHP中文网

要在vscode里打造舒服又高效的markdown写作环境，答案是通过安装核心扩展并进行个性化配置来实现；需安装markdown all in one、markdown preview enhanced、prettier和paste image等扩展，结合settings.json中的编辑器设置、自动格式化、自定义css样式及图片粘贴路径配置，利用mpe的高级渲染功能和css美化预览效果，并通过快捷键、多光标编辑和代码片段提升写作效率，最终实现流畅编辑、美观预览与高效输出的完整工作流。

VSCode设置Markdown写作环境(实用技巧，排版美化指南)

要在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链接也自动生成了。这比先保存图片再手动拖拽或者输入链接要快上好几倍。

简篇AI排版

AI排版工具，上传图文素材，秒出专业效果！

554

查看详情

另外，

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对行距、字间距、段落缩进等进行更细致的微调，以达到印刷级的排版效果。