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

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

要在VSCode里打造一个舒服又高效的Markdown写作环境，其实不复杂，但需要一些巧妙的设置和几个趁手的扩展。核心就是让你的编辑体验尽可能流畅，同时确保最终的排版赏心悦目，甚至能满足一些出版级的需求。这远不止是安装一个扩展那么简单，更多的是一种个人工作流的定制。

解决方案

对我来说，理想的VSCode Markdown写作环境，需要兼顾编辑时的舒适度、预览时的美观度以及写作效率。

首先，你得安装几个核心扩展：

1. Markdown All in One: 这个是基石，提供了目录生成、数学公式支持、自动预览、快捷键等一系列功能。
2. Markdown Preview Enhanced: 如果你对默认的Markdown预览不满意，这个扩展能让你完全掌控预览样式，支持自定义CSS，还能渲染流程图、序列图等，甚至导出为多种格式。
3. Prettier - Code formatter: 虽然它主要是用来格式化代码的，但它也能很好地格式化Markdown文件，让你的文档结构保持一致，减少手动调整的麻烦。
4. Paste Image: 写作时经常需要截图，这个扩展能让你直接从剪贴板粘贴图片到Markdown文件中，并自动生成链接，省去了不少麻烦。

接着，是VSCode的

settings.json

Ctrl+Shift+P

Cmd+Shift+P

settings.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的自定义CSS功能。在你的VSCode设置中（就是前面提到的

settings.json

"markdown-preview-enhanced.styles"

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

Ctrl+Alt+V

Cmd+Alt+V

考拉新媒体导航

考拉新媒体导航——新媒体人的专属门户网站

下载

另外，

Prettier - Code formatter

最后，别忘了VSCode自带的一些效率特性：

• 多光标编辑: 按住

  Alt

  键（Windows/Linux）或

  Option

  键（macOS），然后点击鼠标，可以创建多个光标。这在批量修改列表项或者表格内容时非常高效。
• 代码片段 (Snippets): 你可以自定义一些常用的Markdown结构作为代码片段。比如，如果你经常需要插入一个特定的警告框或者信息提示框，可以创建一个snippet，输入几个字母就能自动补全整个结构。
• 查找替换 (Find and Replace):

  Ctrl+F

  和

  Ctrl+H

  ，配合正则表达式，可以进行非常强大的文本操作。

这些工具和技巧的结合，能让你的Markdown写作流程变得异常顺畅，减少不必要的重复劳动，让你更专注于内容的创作本身。

除了基础功能，VSCode还能如何美化Markdown排版？

谈到Markdown排版的美化，我们通常不只是指预览时的字体颜色那么简单。更深层次的美化，往往涉及到一些高级的渲染特性，以及如何让你的文档在视觉上更具表现力。这就像给一篇文章排版，除了选择字体，你可能还会考虑段落间距、图片布局、甚至是特殊元素的呈现。

一个非常强大的工具，再次提到，是

Markdown Preview Enhanced

1. 支持更多高级语法渲染: 比如流程图 (Flowchart)、序列图 (Sequence Diagram)、甘特图 (Gantt Chart)，甚至数学公式 (LaTeX)。这意味着你可以在Markdown文件中直接用简洁的语法绘制这些图形，而不是去外部工具制作图片再插入。这极大地丰富了Markdown的表现力。 例如，一个简单的流程图：

   ```mermaid
   graph TD;
       A-->B;
       A-->C;
       B-->D;
       C-->D;

   MPE就能直接渲染出来。

2. 自定义代码块高亮主题: 虽然VSCode本身有主题，但MPE允许你为Markdown预览中的代码块单独设置高亮主题。如果你想让你的代码块在文章中呈现出特定的风格，比如GitHub、Solarized或者Monokai，你可以在MPE的设置中指定。这对于技术文档来说尤其重要，能让代码示例更清晰、更吸引人。

3. 导出为多种格式并保留样式: MPE可以将你的Markdown文档导出为HTML、PDF、PNG等多种格式。最棒的是，它能将你自定义的CSS样式也一并打包进去。这意味着你可以在VSCode里设计出漂亮的排版，然后直接导出成一份可以分享或打印的PDF，而无需担心样式丢失。这对于需要发布文档或者制作电子书的人来说，是解放双手的功能。

4. 支持自定义容器 (Admonitions): 很多现代的文档系统都支持像“注意”、“提示”、“警告”这样的特殊信息块，通常带有图标和背景色。MPE也支持这种自定义容器。你可以通过特定的Markdown语法来创建它们，然后用CSS来美化它们的样式。这能让你的文章结构更清晰，重点更突出。

   !!! note "这是一个提示"
       这里是提示的内容。

   通过CSS，你可以让这个“note”块有一个蓝色的边框和浅蓝色的背景。

5. 字体嵌入与排版微调: 如果你对排版有极高的要求，MPE甚至支持在导出的HTML/PDF中嵌入字体，确保在任何设备上都能保持一致的视觉效果。你还可以通过CSS对行距、字间距、段落缩进等进行更细致的微调，以达到印刷级的排版效果。

在我看来，这些高级功能将Markdown写作从简单的文本记录提升到了一个内容创作和排版的层面。它让Markdown不再仅仅是“所写即所得”，而是“所写即所见，且所见即所美”。