最新版的 Visual Studio Code 对 Markdown 的支持已显著提升,其在预览方面的体验甚至可以与 Markdown Preview Enhanced 插件相比。本文将介绍一些优化方法,帮助用户提升在 VSCode 中编写 Markdown 文档的体验。

官方使用说明:https://code.visualstudio.com/docs/languages/markdown

预览常规设置

打开 VSCode 的 markdown.preview 设置,可以看到一些设置选项,如字体、字号、行高等。

使用 CSS

VSCode中Markdown 预览实际上是一个网页,因此可以通过自定义 CSS 来优化其显示效果。

打开 markdown.styles 设置,可以添加 CSS 文件路径。支持两种文件路径:

  1. 相对路径。相对路径是相对于资源管理器中打开的文件夹进行解释的。如果没有打开的文件夹,则相对于 Markdown 文件的位置解释它们。
  2. CSS 文件的 HTTPS URL。

数学公式预览优化

打开 vscode 自带的开发者工具,可以看到所有数学公式都有 class="katex"

目前存在的问题是数学公式太小,于是可以在工作区本地创建 CSS 文件,内容为:

.katex {
font-size: 1.25em !important;
}

然后将该文件路径添加到 markdown.styles 设置中,即可优化公式显示效果。

我也创建了该 CSS 文件的 HTTPS URL:https://blog-static.cnblogs.com/files/blogs/825243/vscode-markdown-style.css

图片大小调整

一种方案是使用 HTML 标签:

<img src="assets/xxx.png" style="width:80%;" />

另一种方案是通过 CSS 设置:

img{
width: 80%;
padding-left: 10%;
}

这段代码将所有图片的宽度设置为段落宽度的 80%,并向右移动 10%,从而实现居中显示。基于此,可以进一步细化设置,如下所示:

img[src*="#w100"] {
width: 100%;
} img[src*="#w80"] {
width: 80%;
} img[src*="#w60"] {
width: 60%;
} img[src*="#w50"] {
width: 50%;
} img[src*="#w30"] {
width: 30%;
} img[src*="#w20"] {
width: 20%;
} img[src*="#w10"] {
width: 10%;
}

此时,可以通过在 Markdown 中使用特定格式来调整图片大小:

![img.png](assets/xxx.png#w60)

编辑器体验优化

为了优化在 VSCode 中编写 Markdown 的体验,在用户 settings.json 中使用如下配置:

"[markdown]": {
"editor.minimap.enabled": false, // 关闭编辑器右侧的小地图以减少视觉干扰
"editor.glyphMargin": false, // 关闭字形边距以获得更简洁的编辑界面
"editor.renderWhitespace": "all" // 显示所有空白字符,方便查看和编辑空格、制表符等
}

图片粘贴

VSCode 的 Paste Image 插件和内置的 copyFiles 功能可以简化图片粘贴操作。

Paste Image 插件设置如下。此时使用 Ctrl+Shift+V 可以把剪切板上的图片保存到工作区的 assets 文件夹中,并在 md 文件中插入图片路径。

VSCode 的 markdown.copyFiles 设置如下。

此时使用 Ctrl+V 快捷键也可以保存剪切板上的图片到工作区的 assets 文件中,并在 md 文件中插入路径。区别在于:

  1. VSCode 内置的 copyFiles 功能还可以粘贴图片和音频文件。
  2. Paste Image 插件保存的图片可以自动生成 Y-MM-DD-HH-mm-ss 的文件名,而 copyFiles 功能则不行。

因此建议这两种方法配合使用。

格式化

markdownlint 插件提供了格式化 Markdown 代码功能,并会对不规范的 markdown 代码进行警告。建议在用户 settings.json 中使用如下配置

"[markdown]": {
"editor.defaultFormatter": "DavidAnson.vscode-markdownlint",
"editor.formatOnSave": true,
},
"markdownlint.config": {
"MD012": false,
"MD018": false,
"MD024": false,
"MD025": false,
"MD033": false,
"MD036": false,
"MD041": false,
"MD045": false,
},

Pangu-Markdown 插件补充了格式化功能,如在中英字符之间插入空格。使用方法为右键点击 Pangu Format。

代码补全与快捷功能

Markdown All in One 插件可以补全 markdown 代码,包括 LaTeX 函数代码。同时也提供了一些编辑 Markdown 的快捷功能。

Better Markdown & Latex Shortcuts 插件提供了一些编辑 LaTeX 公式的快捷键。

功能拓展

Markdown Footnotes 插件让 VSCode 的 markdown 预览支持脚注功能,例如:

这是一个脚注 [^1]

[^1]: 脚注 1

Markdown Image Size 插件提供了调整图片大小的拓展语法。但是该语法应用并不普遍,因此不推荐使用。

导出 PDF 和 Word 文档

Markdown Preview Enhanced 插件支持导出为 PDF 和 Word 文档。其利用 Chrome (Puppeteer) 导出 PDF 文件使用说明为 https://www.cnblogs.com/cjyyx/p/18272365

Markdown Preview Enhanced 插件导出的 PDF 显示效果并不好,因此我更推荐使用 Typora 软件导出。

博客写作

博客园 cnblogs 客户端Zhihu On VSCode 插件都提供了比较好的博客写作体验。

Markdown Publisher For CSDN/JIANSHU/ZHIHU/JUEJIN/WECH 插件支持 Markdown 文档多平台一键发布,但目前使用体验较差。

在 VSCode 中编写 Markdown 的进阶指南的更多相关文章

  1. vscode中使用markdown

    vscode中使用markdown vscode 是微软推出一款轻量级的文本编辑工具,类似于sublime,由于其拥有丰富的插件,安装使用也非常简单,所以深受广大程序员的喜爱. markdown 是一 ...

  2. vscode中使用markdown(转)

    vscode 是微软推出一款轻量级的文本编辑工具,类似于sublime,由于其拥有丰富的插件,安装使用也非常简单,所以深受广大程序员的喜爱. markdown 是一种可以使用普通文本编辑器编写的标记语 ...

  3. 在VSCode中使用Markdown

    前言 最近在学习使用Markdown语法,尝试使用了"MarkdownEditor"."Sublime Text3"."VSCode"这三种 ...

  4. VsCode中编写python环境配置

    1. VsCode中编写python环境配置 1.1. 前言 有过开发经验都知道idea一系列的软件虽然功能比较多,但比较容易卡,电脑不好还真容易上火,这里我想要入门python,还是选了款vscod ...

  5. 如何在vscode中编写.net core 项目(vscode)

    1.下载拓展  .NET Core Extension Pack  (作者:保哥) 这个里面将需要的插件都打包了小白一键下载就好了 2.下载扩展   vscode-solution-explorer ...

  6. vscode中安装使用markdown 插件

    linux中好用的IDE    vscode是微软推出的一款好用免费的IDE,可以快速部署开发环境,所说配置有些繁琐,但是瑕不掩瑜.它同时支持很多种拓展的编辑器,MarkDown只是其中的一种. 安装 ...

  7. 【树莓派】在vscode中连接树莓派并编写代码

    在树莓派里编写代码的话会比较麻烦因此可以在vscode中通过ssh连接树莓派并且编辑代码 参考: vscode通过ssh连接树莓派实现远程开发 VSCODE 远程开发树莓派 使用vscode打造pyt ...

  8. VScode中配置C++运行环境

    目录 VScode中配置C++运行环境 1. 哪些插件 2. 配置开始 3. 编写代码并运行 VScode中配置C++运行环境 关于安装mingw的教程,网络上已经有很多了,这里不再赘述,下面就看VS ...

  9. linux系统下如何在vscode中调试C++代码

    本篇博客以一个简单的hello world程序,介绍在vscode中调试C++代码的配置过程. 1. 安装编译器 vscode是一个轻量的代码编辑器,并不具备代码编译功能,代码编译需要交给编译器完成. ...

  10. 使用vscode 编写Markdown文件

    markdown简单语法参考下面简单事例: # 一级标题 1. 有序列表1 >1. 有序列表1 >>- *test1* >>- **test2** >>- * ...

随机推荐

  1. 新闻网页Python爬虫(jieba分词+关键词搜索排序)

    前言 最近做了一个python3作业题目,涉及到: 网页爬虫 网页中文文字提取 建立文字索引 关键词搜索 涉及到的库有: 爬虫库:requests 解析库:xpath 正则:re 分词库:jieba ...

  2. 题解:CF1941G Rudolf and Subway

    原题链接 简化题意 一个无向连通图中将边分成了不同颜色(保证同种颜色联通),问从 \(b\) 到 \(e\) 最短需要经过几种颜色 思路 考虑因为同种颜色联通,可直接在读入的时候开两个 vector ...

  3. uniapp中OnShow获取缓存

    点击查看代码 function getStorage(key) { return new Promise((resolve, reject) => { uni.getStorage({ key: ...

  4. java学习之旅(day.02)

    java运行机制 编译型:转换为计算机可读的语言 解释型:用什么,读什么 预编译:java文件(源程序)通过javac命令到class文件,class文件(类)放入类加载器,这个类就加载到JVM中了, ...

  5. vue3 如何在 jsx中使用 component 组件

    component 组件不像其它的内置组件(tansition.transitionGroup),可以直接从 vue 中直接导出,所有要在 jsx 使用component就要使用 h 函数 使用 vu ...

  6. java 项目的创建

    新建一个  Spring Initializr

  7. Android项目代码规范

    项目代码规范 Android Studio的代码Style检查和inspect Code功能已经很强大,规范只负责代码结构和文件结构 带?的内容为可选或团队内协商内容 核心目标 提高可维护性: MVV ...

  8. Docker 启动 Redis 就停止解决方案(2022-3)

    启动命令如下: docker run -itd \ -p 6379:6379 \ --name myredis \ -v /home/redis/redis.conf:/etc/redis/redis ...

  9. request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired

    换华为的,否则会出问题:cnpm confg set registry https://mirrors.huaweicloud.com/repository/npm/ npm ERR! code CE ...

  10. Kubernetes1.16安装[kubadm方式]

    Kubernetes 安装手册(非高可用版) 集群信息 1. 节点规划 部署k8s集群的节点按照用途可以划分为如下2类角色: master:集群的master节点,集群的初始化节点,基础配置不低于2C ...