VS Code 配置 Markdown 环境

JxWang05

已于 2024-03-24 14:40:59 修改

阅读量1.3k

点赞数 20

文章标签： VS Code Markdown Prince

于 2024-03-20 20:39:04 首次发布

本文链接：https://blog.csdn.net/weixin_52202311/article/details/136887095

版权

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

摘要由CSDN通过智能技术生成

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;
    }
    // 更改无序列表的缩进，默认缩进空白太多
  }
}

4. 目录

目录是在生成的PDF文件的前几页，带超链接跳转的，这个是目录

书签是侧边栏的那个，一般默认生成的PDF都是带书签的，各级标题就是书签，不过好像一般只支持到六级标题

这个生成方式，一般还是Markdown Preview Enhanced

光标锚定文档的开头，Ctrl+Shift+P调出命令面板，输入Markdown Preview Enhanced: Create Toc，然后就会生成一堆东西，可以参考这个⁸

然后，用Prince导出是可以改CSS的，貌似也有通过这个方法来生成目录的，但是看起来很复杂，我没有仔细研究，可以参考这个⁹

5. 导图

思维导图就是用Markmap自动生成的，但是有点神奇

就是，在VS Code当中，不会显示图片

但是当导出成为HTML之后，就有图片了，而且相比于文字来说还比较大

反正我也只是在VS Code里面简单看两眼，问题不大

不过为了配合思维导图的显示效果，在写Markdown的时候要注意一些问题，可以参考这个¹⁰

摘录如下：

凡是下方有分支的，都写作标题。
凡是想在思维导图上显示的，都写作标题、引用、单行代码、代码块、数学公式中的一个。
不想在思维导图上显示的，即正文部分。

JxWang05

关注

20
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
VS Code 配置 Markdown 环境

以及尽量不要删除打开文件夹的历史记录，否则该文件夹下启用的插件在再次打开该文件夹时会保持禁用，因为记录他们启用的配置数据与历史记录好像在一起放着。一般而言我是禁用所有插件，主要是为了偶尔右键单击打开某单个文件进行编辑，提高这个场景下的启动速度。的，貌似也有通过这个方法来生成目录的，但是看起来很复杂，我没有仔细研究，可以参考。关于导出的设置，也有一些调整的东西，可以参考。在用这个的时候，我调了下字体，但没成功，查。文件的前几页，带超链接跳转的，这个是目录。，因为默认的配置显示的中文很奇怪，参考。
复制链接

扫一扫