VScode插件MarkdownPreviewEnhanced自定义字体style

打开命令面板&＃xff0c;输入Customize CSS&＃xff0c;打开 style.less 文件

命令面板

style.less文件

我使用的 style.less 配置代码如下&＃xff0c;你可以根据需要定制自己喜欢的风格


// &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;
// issues: https://github.com/shd101wyy/markdown-preview-enhanced/issues
// &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;
// &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;
// https://shd101wyy.github.io/markdown-preview-enhanced/#/markdown-basics?id&＃61;line-numbers
// &＃96;&＃96;&＃96;cpp {.line-numbers}
// a &＃61; 3
// b &＃61; 3
// &＃96;&＃96;&＃96;
// &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;
// &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;
// https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/toc.md
// You can configure [TOC] and sidebar TOC by writting front-matter
// ---
// toc:
// depth_from: 1
// depth_to: 1
// ordered: false
// ---
// &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;
// &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;
// &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;
// &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;
// &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;
// &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;
// &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;
// &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;
// &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;
/* Please visit the URL below for more information: */
/* https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */ // .markdown-preview.markdown-preview {// modify your style here// eg: background-color: blue;// font-size: 19px; // use systems font// font-family: "{Consolas}";// color: blue;
// }
// &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;.markdown-preview.markdown-preview {// &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;// &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;// modify your style here// eg: background-color: blue;background-color: #FCFCFC;font-size: 20px;// font-family: "Consolas";font-family: "Medium";// font-family: "新宋体";//// 去掉 toc 前面的小圆点 https://github.com/shd101wyy/markdown-preview-enhanced/issues/1325ul {list-style-type: none;}h1 {// 标题居中// text-align: center;// border-bottom: 1.5px solid #999999;// font-family: "微软雅黑";font-family: "新宋体";font-size: 28px;// color: rgb(88, 131, 209);}h2 {font-size: 23px;}h3 {font-size: 21px;}// h1, h2, h3, h4, h5, h6 {// font-family: &＃39;Anton&＃39;;// }// paragraph font// p {// font-family: &＃39;Anton&＃39;;// }// h1, h2, h3 {// border-bottom: 1px solid #ccc;// }// 取消下划线h1, h2, h3, h4, h5, h6 {border-bottom: none;}// ---下划线粗细hr {height: 0.01em;}/* title numering */// counter-reset: h1;// h1 {// counter-reset: h2// }// h2 {// counter-reset: h3// }// h1:before {// counter-increment: h1;// content: counter(h1) ". "// }// h2:before {// counter-increment: h2;// content: counter(h1) "." counter(h2) ". "// }// custom pdf output style : https://github.com/shd101wyy/markdown-preview-enhanced/issues/89&＃64;media print {font-size: 13px;}}
三、修改后的效果

修改后再次打开 Markdown Preview Enhanced&＃xff0c;可以看到字体有了明显的变化&＃xff0c;看上去舒服多了

Note&＃xff1a; Markdown Preview Enhanced 是可以保证左右两边编辑区和预览区是同步的&＃xff0c;即使预览区显示了较大的图片&＃xff0c;它会自动把你调整的&＃xff0c;这点比CSDN上的markdown编辑器要人性化

https://www.w3schools.com/cssref/pr_list-style-type.asp

https://www.w3schools.com/cssref/playit.asp?filename&＃61;playcss_ul_list-style-type&preval&＃61;circle

ul {list-style-type: circle;// list-style-type: dist;// list-style-type: none;}

Reference

• CSS调整字体大小
• Title and toc autonumbering
• 标题下划线和手动下划线的问题
• How to center the H1 title ? · Issue #1325 · shd101wyy/markdown-preview-enhanced