vscode 更换markdown样式的方法（任意样式都行），并推荐我自用样式（参考于Pie）。

最新推荐文章于 2025-03-11 17:03:22 发布

花裱

最新推荐文章于 2025-03-11 17:03:22 发布

阅读量1w

点赞数 10

文章标签： vscode css

本文链接：https://blog.csdn.net/RP123123123/article/details/118110733

版权

网上大多的方法是这种：
https://blog.csdn.net/csdnear/article/details/78229021
但是有很多局限性

第二种方法微软已经改版，不能引用任意路径的css了，只能引用在此工作区下的css。可这样的话，每次换工作区写markdown都要先引入css，多此一举。

网上对于第三种方法，大多都只是更换 Markdown Preview Enhanced 插件自带的CSS，但是我想要更换我自己的css样式，在网上却很难找得到。

打开你vscode插件位置，我的是

C:\Users\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.5.21\node_modules\@shd101wyy\mume\styles

这里有两个文件夹（关于prism_theme的作用，末尾再详细介绍）
在这里插入图片描述
打开preview_theme文件夹，选择并打开其中一个你不想要的样式（这里我选择的是github_dark），把其内容用你钟意的css内容覆盖掉。

在这里插入图片描述

此时再打开vscode，在你的settings.json中加入一段代码，选择你之前被覆盖掉的css样式

"markdown-preview-enhanced.previewTheme": "github-dark.css",

在这里插入图片描述

不知道什么原因，css里的字体大小(font-size)设置在插件预览里好像不生效，如果你想要更改你的字体大小、背景颜色等设置，可以用 Markdown Preview Enhanced 自带的 style.less 文件

Ctrl+Shift+P -> markdown-preview-enhanced.customizeCss

在这里插入图片描述
在里面写上你想要的额外设置的简单样式

在这里插入图片描述

再打开插件的侧边预览
在这里插入图片描述
可以看到markdown样式成功设置成自己想要的css了

如果你满意一个markdown样式的设计,唯独不满意其代码块的设计，你可以在
第二个文件夹单独设计代码块的样式，来覆盖该markdown样式自带的代码块

打开 prism_theme 文件夹，选中一个你不要的代码块样式，用你想要的代码块样式将其替换，这里我选的是one-dark

在这里插入图片描述

再打开vscode，在你的settings.json中加入一段代码，选择你之前被覆盖掉的css样式

"markdown-preview-enhanced.codeBlockTheme": "one-dark.css",

在这里插入图片描述
打开预览后，可以看到，我的代码块发生了变化

原本的：
在这里插入图片描述

现在的：
在这里插入图片描述

Markdown Preview Enhanced 插件将markdown打印成带样式的PDF:
https://blog.csdn.net/RP123123123/article/details/118113026

css是基于pie 样式做出了相应修改
代码块css是用的：https://blog.csdn.net/qq_43324834/article/details/107551200