修改字体和背景颜色
- 按快捷键 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) ". ";
}