在 VSCode 中编写 Markdown 的进阶指南

vscode,markdown · 浏览次数 : 0

小编点评

Visual Studio Code(VSCode)是一款功能强大的代码编辑器,对Markdown的支持近年来得到了显著提升。通过一系列的优化方法,用户可以进一步提升在VSCode中编写Markdown文档的体验。 一、Markdown预览优化 1. **自定义CSS**:通过修改`markdown.styles`设置,可以添加自定义的CSS文件,以优化Markdown预览的显示效果。 2. **数学公式预览优化**:在VSCode的开发者工具中,为数学公式添加`.katex`类,然后在CSS文件中设置合适的字体大小,以改善数学公式的显示效果。 3. **图片大小调整**:可以使用HTML标签或CSS设置来调整图片的大小和位置。 二、编辑器体验优化 1. **关闭不必要的功能**:通过设置`"editor.minimap.enabled": false`和`"editor.glyphMargin": false`,可以关闭编辑器中的小地图和字形边距,提高编辑效率。 2. **显示所有空白字符**:通过设置`"editor.renderWhitespace": "all"`,可以显示所有的空白字符,方便用户查看和编辑。 三、图片粘贴优化 1. **使用Paste Image插件**:安装并配置Paste Image插件,可以将剪切板上的图片保存到工作区的assets文件夹中,并在Markdown文件中插入图片路径。 2. **使用copyFiles功能**:VSCode内置的copyFiles功能可以粘贴图片和音频文件,且可以自动生成文件名。 四、格式化Markdownlint插件 通过在用户设置文件中使用以下配置,可以启用Markdownlint插件并对不规范的Markdown代码进行警告: ```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-Markdown插件可以补充格式化功能,如在中文和英文字符之间插入空格。 六、代码补全与快捷功能 Markdown All in One插件可以补全Markdown代码,包括LaTeX函数代码,并提供了一些编辑Markdown的快捷功能。Better Markdown & LaTeX Shortcuts插件提供了一些编辑LaTeX公式的快捷键。 七、功能拓展 Markdown Footnotes插件让VSCode的markdown预览支持脚注功能。Markdown Image Size插件提供了调整图片大小的拓展语法,但建议谨慎使用。 八、导出PDF和Word文档 Markdown Preview Enhanced插件支持导出为PDF和Word文档。推荐使用Typora软件导出,因为其导出的PDF效果更好。 九、博客写作 博客园客户端和Zhihu On VSCode插件提供了很好的博客写作体验。Markdown Publisher For CSDN/JIANSHU/ZHIHU/JUEJIN/WECH插件支持Markdown文档多平台一键发布,但使用体验较差。 综上所述,通过这些优化方法,用户可以在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 文件路径。支持两种文件路径:

  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 的进阶指南相似的内容:

在 VSCode 中编写 Markdown 的进阶指南

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

vscode编写markdown

1. 需求分析 2. 环境搭建 1. 需求分析 最近在网上折腾了好久Markdown的写作环境,作为一个普通用户,总结一下个人对于Markdown写作环境的几点需求。由于本人刚接触Markdown不久,因此,需求也比较简单,想看具体搭建步骤的可以直接跳到第二章环境搭建: 本地存储。这一点主要是出于隐

【Azure 应用服务】Azure Function App在部署时候遇见 503 ServiceUnavailable

问题描述 在VS Code中编写好 Azure Function App代码后,通过 func azure functionapp publish 部署失败,抛出 503 Service Unavailable 错误。 Getting site publishing info... Creating

Visual Studio Code调试和发布ASP.NET Core Web应用

前言 上一篇文章主要讲了Visual Studio Code安装C#开发工具包并编写ASP.NET Core Web应用有兴趣的同学可以去看看,今天咱们主要是要讲讲如何在VS Code中调试和发布ASP.NET Core Web应用。 Visual Studio Code安装C#开发工具包并编写AS

使用 Docker 部署 VS Code in The Browser

1)介绍 GitHub:https://github.com/coder/code-server 在日常学习工作中,Vscode 已成为我们首选的代码编辑器。然而,其局限性在于当我们从家到公司移动时,难以保持连续的编码体验。针对这一痛点,虽然市面上已有如 Visual Studio Codespac

vscode插件

自用 vscode 插件 1. EditorConfig for VS Code editorconfig 用来定义编辑器的编码格式规范,编辑器的行为会与 .editorconfig 文件中定义的一致,并且其优先级比编辑器自身的设置要高。 简单说明:在项目根目录下创建 .editorconfi 文件

性能的极致,Rust的加持,Zed-Dev编辑器快速搭建Python3.10开发环境

快就一个字,甚至比以快著称于世的Sublime 4编辑器都快,这就是Zed.dev编辑器。其底层由 Rust 编写,比基于Electron技术微软开源的编辑器VSCode快一倍有余,性能上无出其右,同时支持多人编辑代码。 安装和配置Zed.dev Zed.dev编辑器还在灰度测试阶段,暂时只释出了M

玩一玩 Ubuntu 下的 VSCode 编程

一:背景 1. 讲故事 今天是五一的最后一天,想着长期都在 Windows 平台上做开发,准备今天换到 Ubuntu 系统上体验下,主要是想学习下 AT&T 风格的汇编,这里 Visual Studio 肯定是装不了了,还得上 VSCode,刚好前几天买了一个小工控机,这里简单记录下 零到一 的过程

桌面版vscode用免费的微软4核8G服务器做远程开发(编译运行都在云上,还能自由创建docker服务)

GitHub的Codespaces为个人用户提供了免费的4核8G服务器资源,今天就来实战如何用桌面版vscode连接codespace服务器做远程开发,把编译运行下载等耗时耗资源的操作都转移到云端进行,还能为应用创建各种docker服务,这都不要钱!

自动旋转ROS小车(rviz+urdf+xacro)(附加python操作键盘控制小车运动)

博客地址:https://www.cnblogs.com/zylyehuo/ 成果图 STEP1 创建工作空间 mkdir -p car_ws/src cd car_ws catkin_make STEP2 在vscode中准备需要的文件夹 右键src,点击Create Catkin Package