在 VSCode 中编写 Markdown 的进阶指南
最新版的 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 文件路径。支持两种文件路径:
- 相对路径。相对路径是相对于资源管理器中打开的文件夹进行解释的。如果没有打开的文件夹,则相对于 Markdown 文件的位置解释它们。
- 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 文件中插入路径。区别在于:
- VSCode 内置的 copyFiles 功能还可以粘贴图片和音频文件。
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 的进阶指南的更多相关文章
- vscode中使用markdown
vscode中使用markdown vscode 是微软推出一款轻量级的文本编辑工具,类似于sublime,由于其拥有丰富的插件,安装使用也非常简单,所以深受广大程序员的喜爱. markdown 是一 ...
- vscode中使用markdown(转)
vscode 是微软推出一款轻量级的文本编辑工具,类似于sublime,由于其拥有丰富的插件,安装使用也非常简单,所以深受广大程序员的喜爱. markdown 是一种可以使用普通文本编辑器编写的标记语 ...
- 在VSCode中使用Markdown
前言 最近在学习使用Markdown语法,尝试使用了"MarkdownEditor"."Sublime Text3"."VSCode"这三种 ...
- VsCode中编写python环境配置
1. VsCode中编写python环境配置 1.1. 前言 有过开发经验都知道idea一系列的软件虽然功能比较多,但比较容易卡,电脑不好还真容易上火,这里我想要入门python,还是选了款vscod ...
- 如何在vscode中编写.net core 项目(vscode)
1.下载拓展 .NET Core Extension Pack (作者:保哥) 这个里面将需要的插件都打包了小白一键下载就好了 2.下载扩展 vscode-solution-explorer ...
- vscode中安装使用markdown 插件
linux中好用的IDE vscode是微软推出的一款好用免费的IDE,可以快速部署开发环境,所说配置有些繁琐,但是瑕不掩瑜.它同时支持很多种拓展的编辑器,MarkDown只是其中的一种. 安装 ...
- 【树莓派】在vscode中连接树莓派并编写代码
在树莓派里编写代码的话会比较麻烦因此可以在vscode中通过ssh连接树莓派并且编辑代码 参考: vscode通过ssh连接树莓派实现远程开发 VSCODE 远程开发树莓派 使用vscode打造pyt ...
- VScode中配置C++运行环境
目录 VScode中配置C++运行环境 1. 哪些插件 2. 配置开始 3. 编写代码并运行 VScode中配置C++运行环境 关于安装mingw的教程,网络上已经有很多了,这里不再赘述,下面就看VS ...
- linux系统下如何在vscode中调试C++代码
本篇博客以一个简单的hello world程序,介绍在vscode中调试C++代码的配置过程. 1. 安装编译器 vscode是一个轻量的代码编辑器,并不具备代码编译功能,代码编译需要交给编译器完成. ...
- 使用vscode 编写Markdown文件
markdown简单语法参考下面简单事例: # 一级标题 1. 有序列表1 >1. 有序列表1 >>- *test1* >>- **test2** >>- * ...
随机推荐
- 新闻网页Python爬虫(jieba分词+关键词搜索排序)
前言 最近做了一个python3作业题目,涉及到: 网页爬虫 网页中文文字提取 建立文字索引 关键词搜索 涉及到的库有: 爬虫库:requests 解析库:xpath 正则:re 分词库:jieba ...
- 题解:CF1941G Rudolf and Subway
原题链接 简化题意 一个无向连通图中将边分成了不同颜色(保证同种颜色联通),问从 \(b\) 到 \(e\) 最短需要经过几种颜色 思路 考虑因为同种颜色联通,可直接在读入的时候开两个 vector ...
- uniapp中OnShow获取缓存
点击查看代码 function getStorage(key) { return new Promise((resolve, reject) => { uni.getStorage({ key: ...
- java学习之旅(day.02)
java运行机制 编译型:转换为计算机可读的语言 解释型:用什么,读什么 预编译:java文件(源程序)通过javac命令到class文件,class文件(类)放入类加载器,这个类就加载到JVM中了, ...
- vue3 如何在 jsx中使用 component 组件
component 组件不像其它的内置组件(tansition.transitionGroup),可以直接从 vue 中直接导出,所有要在 jsx 使用component就要使用 h 函数 使用 vu ...
- java 项目的创建
新建一个 Spring Initializr
- Android项目代码规范
项目代码规范 Android Studio的代码Style检查和inspect Code功能已经很强大,规范只负责代码结构和文件结构 带?的内容为可选或团队内协商内容 核心目标 提高可维护性: MVV ...
- Docker 启动 Redis 就停止解决方案(2022-3)
启动命令如下: docker run -itd \ -p 6379:6379 \ --name myredis \ -v /home/redis/redis.conf:/etc/redis/redis ...
- 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 ...
- Kubernetes1.16安装[kubadm方式]
Kubernetes 安装手册(非高可用版) 集群信息 1. 节点规划 部署k8s集群的节点按照用途可以划分为如下2类角色: master:集群的master节点,集群的初始化节点,基础配置不低于2C ...