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

打开命令面板,输入Customize CSS
在这里插入图片描述
在这里插入图片描述
修改后效果如下
在这里插入图片描述
我的style.less配置如下:

/* 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;
  font-size: 19px;
  // font-family: "Consolas";
	font-family: "新宋体";

	h1 {
		border-bottom: 1.5px solid #999999;
    font-family: "微软雅黑";
    font-size: 30px;
  }
  h2 {
    font-size: 24px;
  }
  h3 {
    font-size: 22px;
  }

  // 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是可以保证左右两边编辑区和预览区是同步的,即使预览区显示了较大的图片,它会自动把你调整的,这点比CSDN上的markdown编辑器要人性化

参考资料:

发布了308 篇原创文章 · 获赞 149 · 访问量 15万+

猜你喜欢

转载自blog.csdn.net/qq_43827595/article/details/104983125