注意:更新插件后,CSS样式会重置,需要将你的样式重新设置一遍

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

第二种方法:markdown.styles[]

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

第三种方法:Markdown Preview Enhanced

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

如何利用插件更换想要的markdown样式?

打开你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",


打开预览后,可以看到,我的代码块发生了变化

原本的:

现在的:


附上我的css和代码块css:
https://blog.csdn.net/RP123123123/article/details/118112918

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

vscode 更换markdown样式的方法(任意样式都行),并推荐我自用样式(参考于Pie)。相关推荐

  1. 小别墅样式_乡村小别墅设计图纸推荐,流行样式都在这里!

    如今在乡村建别墅已经是很常见的事情了,各式各样的别墅都能见到.下面小编给大家推荐几套乡村小别墅的设计图,都是今年的流行样式! 别墅户型一 图纸编号:yg621 别墅风格:中式 占地面积:157㎡ 预估 ...

  2. JS中修改元素内容,属性,样式的方法【详解】

    改变元素内容的方法: .innerHTML=内容(可识别标签)                            .innerText=内容(只识别文本) 如果把属性作为集合,那么样式就是这个集合 ...

  3. ios 系统状态栏样式修改_iOS 一种新的修改导航栏样式的方法(支持iOS10).

    iOS 一种新的修改导航栏样式的方法. 开宗明义: 对系统导航栏最底层的UIView加一层CALayer, 通过操作这个自己创建的CALayer来修改导航栏样式. 修改系统导航栏样式的几种方法 1.使 ...

  4. jsp ul设置滚动条_jquery实现Li滚动时滚动条自动添加样式的方法

    本文实例讲述了jquery实现Li滚动时滚动条自动添加样式的方法.分享给大家供大家参考.具体如下: 这里使用jquery实现当拖动滚动条的时候,Li滚动列表中的内容会自动随滚动条变化而下移,并自动添加 ...

  5. dw的css样式怎么删除掉,三种方法教你DreamWeaver下如何应用CSS样式

    首先介绍一下CSS样式的属性: CSS样式属性被分为八大类:类型,背景,区块,边框,列表,定位,扩展. 类型主要定义文本的字体,大小,颜色,行高和修饰等.如图所示: 方法一: 内联样式可以通过styl ...

  6. jQuery使用toggleClass方法动态添加删除Class样式的方法

    本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法.分享给大家供大家参考.具体分析如下: jQuery通过toggleClass方法动态添加删除Class,一次执 ...

  7. html局部可复制,截取网页局部区域css样式的方法和系统的制作方法

    截取网页局部区域css样式的方法和系统的制作方法 [技术领域] [0001]本发明涉及计算机网络技术领域,特别是涉及一种截取网页局部区域CSS样式的方法和系统. [背景技术] [0002]CSS(Ca ...

  8. php 修改 wordpress,修改WordPress中文章编辑器的样式的方法详解

    这篇文章主要介绍了修改WordPress中文章编辑器的样式的方法详解,同时文中也推荐了两款取代默认文章编辑器的插件,需要的朋友可以参考下 自定义文章编辑器的样式每一个 WordPress 主题的文章样 ...

  9. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 <strong>//1.获取和设置样式</strong>    $("#tow").attr("class&q ...

最新文章

  1. C++之指向对象成员函数的指针
  2. 明明白白你的Linux服务器——硬件篇
  3. 神经网络与深度学习——TensorFlow2.0实战(笔记)(三)(python运算符和表达式)
  4. 基于External-DNS的多集群Service DNS实践
  5. linux-mysql了解
  6. 大数据时代都说python发展非常好,学习Python,到底有啥优势?
  7. 华为已经没落的一个手机系列 无人问津甚至有点多余
  8. 百度CTO王海峰:百度翻译每日翻译量已达到千亿字符
  9. 普惠AI,将是开发者下一个风口吗?看看他们怎么说
  10. 对象可以创建数组吗_电脑零基础可以学习创建网站吗?
  11. ffmpeg ACC音频播放
  12. 第三十一章 SQL命令 DROP DATABASE
  13. 张亚勤、刘慈欣、周鸿祎、王飞跃新书推荐,《崛起的超级智能:互联网大脑如何影响科技未来》...
  14. java阴阳师抽卡算法_阴阳师抽卡小技巧,抽出SSR很轻松
  15. 欧氏空间距离和内积_欧氏空间的内积与线性变换
  16. AI插画师:生成对抗网络
  17. Python re.compile以及group分组
  18. mysql 时间格式转换年月日时分秒
  19. 麦子学院深度学习视频SVM人脸识别课程代码修改及实现
  20. 计算机模拟需要什么配置电脑,城市天际线配置要求 最低电脑配置要求

热门文章

  1. 【疲劳检测】基于形态学实现疲劳检测附matlab代码
  2. 暑假来了,画一个日月地球的轨道模型给孩子们,秒懂四季更迭、日蚀月蚀
  3. element 表格全局筛选(筛选结果请求后端接口)
  4. 【NOI科目校 信息学知识点测评-组合计数专题】展览方案
  5. QQ9.0需要安装两个插件
  6. 种子计数法对种子公司的好处
  7. 现流行的第三方库及名称
  8. 《伪样本新场景样本挖掘和适应》
  9. QQ音乐 最新歌曲源 API(稳定)
  10. Python杀死了Excel