VScode插件Markdown Preview Enhanced自定义字体style

最新推荐文章于 2025-04-11 12:44:37 发布

捡起一束光

最新推荐文章于 2025-04-11 12:44:37 发布

阅读量8.9k

点赞数 9

分类专栏：算法工程

本文链接：https://blog.csdn.net/qq_43827595/article/details/104983125

版权

算法工程专栏收录该内容

41 篇文章

订阅专栏

本文详细介绍如何通过修改style.less文件来自定义Markdown预览增强插件(MarkdownPreviewEnhanced)的样式，包括字体、颜色、列表样式等，使Markdown文档呈现更个性化的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、打开 style.less 文件

打开命令面板，输入Customize CSS，打开 style.less 文件

命令面板

style.less文件

二、修改 style 代码

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


// ====================
// issues: https://github.com/shd101wyy/markdown-preview-enhanced/issues
// ====================
// ====================
// https://shd101wyy.github.io/markdown-preview-enhanced/#/markdown-basics?id=line-numbers
// ```cpp {.line-numbers}
// a = 3
// b = 3
// ```
// ====================
// ====================
// 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
// ---
// ====================
// ====================
// ====================
// ====================
// ====================
// ====================
// ====================
// ====================
// ====================
/* 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; 
// }
// ====================



.markdown-preview.markdown-preview {
  // ===================


  // ===================
	// 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/1325
  ul {
    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: 'Anton';
  // }

  // paragraph font
  // p {
  //   font-family: 'Anton';
  // }

  // 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
  @media print {
    font-size: 13px;
  }

}

三、修改后的效果

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

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

补充：更改列表样式

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

https://www.w3schools.com/cssref/playit.asp?filename=playcss_ul_list-style-type&preval=circle
在这里插入图片描述

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