VS Code 配置 Markdown 环境_vscode配置markdown-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52202311/article/details/136887095

本文介绍了如何在VSCode中配置Markdown环境，包括使用MarkdownAllinOne插件进行编辑，MarkdownPreviewEnhanced用于渲染和导出PDF，以及如何通过Pandoc和Prince进行转换。同时提到了如何管理和优化插件以提升编辑效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VS Code 配置 Markdown 环境

1. 背景
2. 插件
3. 导出
- 3.1 Pandoc
- 3.2 Prince
4. 目录
5. 导图

1. 背景

总之就是在学习一个系列教程的时候，需要短期地做个笔记

Typora收费，Effie文艺，mdbook、gitbook又太大，还是基于VS Code吧

2. 插件

Markdown All in One，主要是在编辑器起作用，常用的快捷键如下：

+------------------+----------------------------+
| Key              | Command                    |
+------------------+----------------------------+
| Ctrl/Cmd + B     | Toggle bold                |
| Ctrl/Cmd + I     | Toggle italic              |
| Ctrl + Shift + ] | Toggle heading (uplevel)   |
| Ctrl + Shift + [ | Toggle heading (downlevel) |
| Ctrl/Cmd + M     | Toggle math environment    |
+------------------+----------------------------+

Markdown Preview Enhanced

主要是为了渲染Markdown，以及导出PDF文件

Markmap

根据Markdown生成思维导图

vscode-pdf

在VS Code当中查看PDF

啊，对，有必要说一句，VS Code的插件得好好管理一下，要不然启动巨慢，而且很卡

一般而言我是禁用所有插件，主要是为了偶尔右键单击打开某单个文件进行编辑，提高这个场景下的启动速度

但是插件还是要用的，不过的在工作区启用

例如我在某个文件夹做笔记，那么当我在VS Code中打开这个文件夹后，找到需要使用的插件，右键单击选择启用（工作区）

这样就可以使得这个插件只在该文件夹起效，开其他文件还是禁用，提高响应速度

以及尽量不要删除打开文件夹的历史记录，否则该文件夹下启用的插件在再次打开该文件夹时会保持禁用，因为记录他们启用的配置数据与历史记录好像在一起放着

3. 导出

为了能够导出PDF，需要安装一个Prince或者Pandoc，安装过程可以参考这个¹和这个²

具体操作就是在Markdown的Markdown Preview Enhanced右键单击，然后选择Pandoc或者Prince导出

3.1 Pandoc

如果使用Pandoc的话，貌似还得有xlatex什么的。总之我之前配过latex，导致我也不太清楚从头开始要怎么配。

在用这个的时候，我调了下字体，但没成功，查教程³也没用

关于导出的设置，也有一些调整的东西，可以参考这个⁴和这个⁵

在这里放个导出模板吧：

---
title: title
author: author
date: date

output: 
    pdf_document: 
        latex_engine: xelatex
        # toc: true
        # number_sections: true
        # pandoc_args: []

toc:
  depth_from: 1
  depth_to: 9
  ordered: false

toc-depth: 9

classoption: UTF8
fontsize: 14pt
# documentclass: article
documentclass: extarticle
# documentclass: ctexart
geometry: margin=2cm
# colorlinks: true

header-includes:
  # - \usepackage{graphicx}
  # - \setkeys{Gin}{width=0.8\textwidth}
  # - \usepackage{amsmath}
  # - \allowdisplaybreaks
  - \setcounter{tocdepth}{9}
  - \setcounter{tocdepth}{9}

mainfont: SimSun
sansfont: SimHei
monofont: Consolas
CJKmainfont: SimSun
# CJKmainfont: DengXian
CJKsansfont: SimHei
CJKmonofont: Consolas
# CJKoptions: BoldFont
# CJKoptions: ItalicFont
# CJKoptions: BoldItalicFont
---

3.2 Prince

这个的话，需要改一下CSS，因为默认的配置显示的中文很奇怪，参考这个⁶

我改完后感觉列表的缩进似乎有点太多了，于是参考这个⁷改了一下

总之，Ctrl+Shift+P调出命令面板，输入Markdown Preview Enhanced: Customize Css，然后我调的大概是这个样子：


/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;
  /* prince设置参数 */
  &.prince {
    /* 添加页码 */
    font-family: Microsoft YaHei;
    // 调整字体，默认的字体看上去有些奇怪
    @page {
      @bottom {
        font-family: Microsoft YaHei;
        content: counter(page) " / " counter(pages)
      }
    }
    // 添加页脚，并设置字体
    ul {
      padding-left: 0.2cm;
      margin-left: 0.2cm;
    }
    // 更改无序列表的缩进，默认缩进空白太多
  }
}