VsCode更换MarkDown样式到底能有多好看？

vs code到底有多强大？

先看看MarkDown笔记的预览效果

这只是一种插件

谁再让我用别的软件写代码

我就把这篇文章扔过去

如何操作？

1、安装插件：在扩展中搜索Markdown Preview Enhance

2、点击【扩展设置】

3、点击【查看】—【命令面板】

4、在搜索框中输入markdown-preview-enhanced.customizeCss，markdown的样式代码就出来了。然后进行样式的美化~

5、Ctrl+K V查看预览结果，是不是发现预览的效果和你正在看的文章样式一模一样呢？关注公众號【小知识酷】，查看更多vscode功能。

6、文本强调效果Markdown All in One

快捷键	MD	样式	html语法	效果
Alt+S	~~小知识酷~~	黑色字体+蓝色虚下划线	s	小知识酷
ctrl+I	*小知识酷*	黑体文字+蓝色实下划线	em斜体	小知识酷
ctrl+B	**小知识酷**	橙色文字	strong加粗	2
	***小知识酷***	橙色文字+蓝色实下划线	<strong><em>	小知识酷
	2^10^	文字上标
	H~2~O	文字下标	sub下标	H2O
选中文字后按```	``	单个代码	code

7、代码样式

/*
名称：VscodeMarkdownStyle
介绍：vscode markdown皮肤代码样式
发布时间：2023年10月21日21:02:55
更新时间：2024年4月4日17:00:54
保存地址：https://www.cnblogs.com/MrFlySand/p/16955769.html
*/

* {
  font-size: 15px;
  word-break: break-all;
  text-align: justify;
  /* 所有行两端对齐*/
  text-justify: inter-ideograph;
  /*最后一行居左对齐*/
}

.markdown-preview {
  line-height: 1.8;
  font-family: Optima-Regular, Optima, PingFangTC-Light, PingFangSC-light, PingFangTC-light;
  letter-spacing: 2px;
  background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.04) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.04) 3%, rgba(0, 0, 0, 0) 3%);
  background-size: 20px 20px;
  background-position: center center;
  height: auto;
}
.markdown-preview a{
  color: #409eff !important;
  font-weight: 700 !important;
}
.markdown-preview em {
  color: #2b2b2b;
  border-bottom: 1.6px solid #42B983;
  font-style: normal;
  /* text-decoration: #42B983 underline; */
}
s {
  text-decoration: none;/*清除文本样式，没有下划线 */
  text-decoration: #42B983 wavy underline;
  text-underline-offset: 6px; /*下划线与基线的距离*/
   text-decoration-thickness: 1.2px; /*下划线的粗细*/
}
strong {
  font-weight: bolder;
  color: #ff4c00 !important;
}
b{
  font-weight: bolder;
  color: #c20000 !important;
}
p {
  font-size: 15px !important;
}

/* 一级标题 */

h1 {
  display: table;
  margin: 30px auto 20px auto !important;
  padding: 10px !important;
  background-image: linear-gradient(to left, rgb(253, 213, 231), rgb(194, 226, 249));
  border-width: 1px;
  border-radius: 10px;
  box-shadow: 3px 3px 3px #ccc;
  font-size: 20px !important;
  text-align: center;
}

h2 {
  display: table;
  margin: 30px auto 20px auto !important;
  padding: 0px 10px !important;
  border-bottom: 5px solid #205792;
  text-align: center;
  font-size: 18px !important;
}


/* 三级标题 */
h3 {
  border-left: 8px solid #03a9f4;
  padding: 4px 10px !important;
  font-weight: bold;
  border-bottom: none !important;
  margin: 20px 0px -10px 0px !important;
}

h4 {
  border-bottom: #2b2b2b;
  font-size: 20px;
  font-size: 1.25rem;
  margin: 20px 0px -10px 0px !important;
}

h4:before {
  content: "✒️ ";
}

h5{
  margin: 20px 0px -10px 0px !important;
}
h5:before {
  content: "✏️ ";
}

h6 {
  background-color: #f1f1f1;
  border-left: 5px solid #fff;
  padding-left: 5px !important;
  box-shadow: -3px 0px #205792;
  margin: 25px 0px -10px 0px !important;
}

img {
  // width: 95% !important;
  margin: 5px auto 8px auto !important;
  border-radius: 3px;
  box-shadow: 0px 0px 5px #ccc;
  border: 1px solid #ccc;
  max-width: 500px !important;
  display: block;
}

ol li {
  list-style: auto;
}

sup,
sub {
  font-size: 0.6em;
}

table td {
  white-space: nowrap;
}

table {
  border: 1px solid #dedede;
  /*表格外边框设置*/
  margin: 15px auto;
  /*外边距*/
  border-collapse: collapse;
  /*使用单一线条的边框*/
  empty-cells: show;
  /*单元格无内容依旧绘制边框*/
  white-space: nowrap;
  /*表头内容强制在一行显示*/
}

table th {
  white-space: nowrap;
  /*表头内容强制在一行显示*/
  font-weight: bold;
  /*加粗*/
  text-align: center !important;
  /*内容居中，加上 !important 避免被 Markdown 样式覆盖*/
  background: #6aa2ff !important;
  color: #fff !important;
}

table tbody tr {
  background-color: #ffffff;
}

table tbody tr:nth-child(2n) {
  background-color: #f6f8fa !important;
  border-top: 1px solid #c6cbd1 !important;
}

table tr:hover {
  background: #efefef;
}

dl {
  background: #eff5f0;
  padding: 0 5px !important;
  border-radius: 10px;
}

dl>dt {
  font-style: normal !important;
  font-weight: 900 !important;
  padding: 5px !important;
  border-bottom: 1px solid #ddd;
}

dl>dd {
  padding: 5px !important;
  margin: 0;
}
dl#dlBackground1{
  background: #faeff4;
}
dl#dlBackground2{
  background: #fce8e1d4;
}
dl#dlBackground3{
  background: #def2ff;
}
/*引用样式*/
blockquote {
  border-left: solid #ef7060 4px !important;
  background: #fff9f9 !important;
  text-indent: 1.8em;
  /*首行缩进*/
  margin: 0;
  color: #2b2b2b !important;
  border-left: none;
  position: relative;
  margin: 0 !important;
  padding-left: 0px !important;
  padding: 10px !important;

}

blockquote p {
  margin: 0 !important;
  font-weight: 400 !important;
  padding: 0 !important;
}
// 图注
p.p01 {
  text-align: center;
  color: #a0a0a0;
  font-size: 0.6em !important;
  line-height: 0;
  margin-top: -20px;
}

//有序列表
.markdown-preview ol ol{
  list-style: upper-alpha;
}
.markdown-previewol ol ol{
  list-style: lower-alpha;
}
.markdown-preview ol ol ol ol{
  list-style: initial;
}
.markdown-preview ol ol ol ol ol{
  list-style: circle;
}

MarkDown自动在另一栏显示预览(实时显示)

1. vscode取消自动预览markdown preview预览：转到“文件”->“首选项”->“设置”（或按ctrl+,），搜索以下内容并将其禁用：Auto Show Preview To Side
   
2. Ctrl+K V打开markdown预览效果

在MarkDown中创建目录

1. 在vs code中按ctrl+shift+p，然后输入“创建目录”
2. 绑定快捷键ctrl+shift+alt+c(contents)
   

快捷方式

1. 输入法快捷输入codl

<dl id="dlBackground1">
<dt alt="标题→"></dt>
<dd alt="内容↓">

</dd>
</dl>

mdnice代码样式

/*
名称：mdnice样式代码
链接：https://www.cnblogs.com/MrFlySand/p/16955769.html
发表日期：2023年6月3日18:09:59
更新日期：2023年10月3日18:10:15
*/

*{   
  word-break: break-all;
  text-align:justify ; /* 所有行两端对齐*/
text-justify:inter-ideograph ; /*最后一行居左对齐*/
  
}
#nice {
    line-height: 1.8;
    font-family: Optima-Regular, Optima, PingFangTC-Light, PingFangSC-light, PingFangTC-light;
    letter-spacing: 2px;
   background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.04) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.04) 3%, rgba(0, 0, 0, 0) 3%);
    background-size: 20px 20px;
    background-position: center center;

}
p{
  font-size:15px !important;
}
p.p01 {
    text-align: center;
    color: #a0a0a0 !important;
    line-height: 0;
  	font-size:12px !important;
}
/* 一级标题 */

h1 {
    display: table;
    margin: 30px auto 20px auto !important;
    padding: 10px !important;
    background-image: linear-gradient(to left,     rgb(253, 213, 231), rgb(194, 226, 249));
    border-width: 1px;
    border-radius: 10px;
    box-shadow: 3px 3px 3px #ccc;
    font-size: 20px !important;
    text-align:center;
}

h2 {
    display: table;
    margin: 30px auto 20px auto !important;
    padding: 0px 10px !important;
    border-bottom: 5px solid #205792;
    text-align: center;
    font-size: 18px !important;
}


/* 三级标题 */
h3 {
    border-left: 8px solid #03a9f4;
    padding: 4px 10px !important;
    font-weight: bold;
    border-bottom: none !important;
}

h4 {
    border-bottom: #2b2b2b;
  
}

h4:before {
    content: "✒️ ";
}

h4 {}

h5:before {
    content: "✏️ ";
}

h6 {
    background-color: #f1f1f1;
    border-left: 5px solid #fff;
    padding: 0 5px 0 5px !important;
    box-shadow: -3px 0px #205792;
}

img{
    width:95%;
    margin: 5px auto 8px auto !important;
    border-radius: 3px;
    box-shadow:0px 0px 5px #ccc;
  	border: 1px solid #ccc;
}
em {
  border-bottom: 2px solid #ff4c00;
  font-style: normal !important;
}

s {
  border-bottom: 2px dashed #72C38B;
  text-decoration: none;
  /*清除文本样式，没有下划线 */
}

b,strong {
  font-weight: bolder;
  color: #ff4c00 !important;
}

sup,
sub {
  font-size: 0.6em;
}
table td {
white-space: nowrap;
}
table {
border: 1px solid #dedede; /*表格外边框设置*/
margin: 15px auto; /*外边距*/
border-collapse: collapse; /*使用单一线条的边框*/
empty-cells: show; /*单元格无内容依旧绘制边框*/
   white-space: nowrap; /*表头内容强制在一行显示*/
}

table th {
  white-space: nowrap; /*表头内容强制在一行显示*/
font-weight: bold; /*加粗*/
text-align: center !important; /*内容居中，加上 !important 避免被 Markdown 样式覆盖*/
    background: #6aa2ff !important;
    color: #fff;
}

table tbody tr:nth-child(2n) {
    background-color: #f6f8fa !important;
    border-top: 1px solid #c6cbd1 !important;
}
table tr:hover {
background: #efefef;
}
/*引用*/
#nice .multiquote-1 {
        border-left: solid #ef7060 4px !important;
        background: #fff9f9 !important;
        text-indent:1.8em;/*首行缩进*/
        margin: 0;
        color: #2b2b2b !important;
        border-left: none;
        position: relative;
        margin: 0 !important;
        padding-left:0px !important;
        padding: 10px !important;

      }
  
      blockquote p {
        margin: 0 !important;
        font-weight:400 !important;
        padding: 0 !important;
      }

#nice ol ol{
  list-style: upper-alpha;
}
#nice ol ol ol{
  list-style: lower-alpha;
}
#nice ol ol ol ol{
  list-style: initial;
}
#nice ol ol ol ol ol{
  list-style: circle;
}

微信公众号网页F12直接修改html文本属性：text-align: left;margin-bottom: 0px;word-break: break-all;text-align:justify; text-justify:inter-ideograph;