VS Code 配置 Markdown 环境
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
,安装过程可以参考这个1和这个2
具体操作就是在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
,因为默认的配置显示的中文很奇怪,参考这个6
我改完后感觉列表的缩进似乎有点太多了,于是参考这个7改了一下
总之,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
,然后就会生成一堆东西,可以参考这个8
然后,用Prince
导出是可以改CSS
的,貌似也有通过这个方法来生成目录的,但是看起来很复杂,我没有仔细研究,可以参考这个9
5. 导图
思维导图就是用Markmap
自动生成的,但是有点神奇
就是,在VS Code
当中,不会显示图片
但是当导出成为HTML
之后,就有图片了,而且相比于文字来说还比较大
反正我也只是在VS Code
里面简单看两眼,问题不大
不过为了配合思维导图的显示效果,在写Markdown
的时候要注意一些问题,可以参考这个10
摘录如下:
- 凡是下方有分支的,都写作标题。
- 凡是想在思维导图上显示的,都写作标题、引用、单行代码、代码块、数学公式中的一个。
- 不想在思维导图上显示的,即正文部分。
VSCode:“princexml” is required to be installed+vscode中如何使用md文件 - 风中狂笑 - 博客园 ↩︎
latex - From Markdown to PDF: how to change the font-size with Pandoc? - Stack Overflow ↩︎
【LaTeX】Pandoc调用xelatex从.md文件生成含自选中文字体的PDF文件_! latex error: unicode character 鏈?pandoc.exe: <st-CSDN博客 ↩︎
VS Code 中 Markdown Preview Enhanced 插件利用 pandoc 导出 pdf 文件的一些问题 - 知乎 ↩︎
基于vscode编写markdown导出带书签(目录)的pdf_vscode导出markdown为pdf 带目录-CSDN博客 ↩︎