当前位置：首页 > news >正文

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

news 2025/6/25 13:17:30

修改字体和背景颜色

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

修改自动编号和背景颜色

背景颜色

按 F1 或者 Ctrl + Shift + P，输入 Customize CSS，选择 Markdown Preview Enhanced 对应的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 中

/*** 首先在父元素中（在这里是 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) ". ";
}