VScode 修改 Markdown Preview Enhanced 字体以及大纲编号

修改字体和背景颜色

  1. 按快捷键 Ctrl + , 打开设置,搜索 markdown-preview-enhanced.previewTheme,选择一个黑色主题的css,如 github-dark.css.

修改自动编号和背景颜色

背景颜色

按 F1 或者 Ctrl + Shift + P,输入 Customize CSS,选择 Markdown Preview Enhanced 对应的css (建议全局)

css 复制代码
.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;
  background-color: #000;
  font-family: 'Consolas'; // 字体类型
  font-size: 16px;  	   // 字体大小
}

目录自动编号

在刚才打开的style.less 文件中输入以下样式,注意样式不要放在.markdown-preview.markdown-preview 中

css 复制代码
/**
 * 首先在父元素中(在这里是 body 元素),初始化你想要编号的最大标题的计数。
 */
 body {
  counter-reset: hbody;
}
  
/**
 * 然后父标题初始化子标题的计数,下面以此类推。
 */
h1 {
  counter-reset: h1;
}

h2 {
  counter-reset: h2;
}

h3 {
  counter-reset: h3;
}

h4 {
  counter-reset: h4;
}

h5 {
  counter-reset: h5;
}

  
/**
 * 接着在每个标题前面自动加上编号
 *
 * 如果不想从 h1 开始自动编号,而是把 h1 当成文章题目,从 h2 开始自动编号,那么
 * 1. 把 h1:before 注释
 * 2. 从 h2:before 开始到 h6:before,把编号开头的 counter(hbody) "." 这一部分删除
 */
// h1:before {
//   counter-increment: hbody;
//   content: counter(hbody) ". ";
// }
h2:before {
  counter-increment: h1;
  content:counter(h1) ". ";
}

h3:before {
  counter-increment: h2;
  content:counter(h1) "." counter(h2) ". ";
}

h4:before {
  counter-increment: h3;
  content:counter(h1) "." counter(h2) "." counter(h3) ". ";
}

h5:before {
  counter-increment: h4;
  content:counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". ";
}

h6:before {
  counter-increment: h5;
  content:counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
}
相关推荐
凭君语未可1 分钟前
介绍 IntelliJ IDEA 快捷键操作
java·ide·intellij-idea
爱学习的章鱼哥1 小时前
如何实现一个可视化的文字编辑器(C语言版)?
c语言·编辑器·文本编辑器·程序设计·easyx
苏克贝塔2 小时前
2025 VSCode中如何进行dotnet开发环境配置完整教程
ide·vscode·编辑器
ykjhr_3d6 小时前
展销编辑器在未来的发展前景
编辑器
2301_787552877 小时前
AI-Browser适用于 ChatGPT、Gemini、Claude、DeepSeek、Grok的客户端开源应用程序,集成了 Monaco 编辑器。
人工智能·chatgpt·自动化·编辑器·deepseek
Java&Develop16 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
聂 可 以18 小时前
IntelliJ IDEA修改实体类成员变量的名称(引入了该实体类的全部文件也会自动更新变量的名称)
java·ide·intellij-idea
MoonBit月兔19 小时前
双周报Vol.70: 运算符重载语义变化、String API 改动、IDE Markdown 格式支持优化...多项更新升级!
ide·算法·哈希算法
心之所向,自强不息1 天前
关于Android Studio的Gradle各项配置
android·ide·gradle·android studio
二狗哈1 天前
制作一款打飞机游戏23:编辑器ui
ui·编辑器·excel