VS code markdown preview enhanced插件渲染配置

mac:

• command+shift+P命令
• 输入Markdown Preview Enhanced: Customize CSS，并点击
• 在打开的style.less配置文件添加一下配置

/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

/* styles.md.css */

/* 全局背景与文字 */
  
.markdown-preview {
  background-color: #1a1a1a !important;

  color: #e0e0e0 !important;
  font-family: 'Segoe UI', system-ui, sans-serif;
  padding: 2rem;
  font-size: 15px; /* 原默认16px，建议14-15px */
  line-height: 1.5; /* 原1.6，微调保持比例 */
  letter-spacing: 0.5px; /* 新增字间距 */
}

/* 标题层级 */
h1 {
  color: #7ec699 !important;
  border-bottom: 2px solid #3a3a3a;
  padding-bottom: 0.3em;
  font-size: 1.8em !important; /* 原2.2em */
  line-height: 1.2;
}

h2 {
  color: #dd9a6d !important;
  font-size: 1.5em !important; /* 原1.8em */
  line-height: 1.3;
}

h3 { color: #79b8ff !important; 
  font-size: 1.3em !important;
  line-height: 1.4;}

h4 { color: #80b800 !important; 
  font-size: 1.1em !important;
  line-height: 1.2;}

h5 { color: #79b8ff !important; 
  font-size: 1.1em !important;
  line-height: 1.2;}

/* 代码块 */
pre {
  background: #252526 !important;
  border-radius: 6px;
  border: 1px solid #373737;
  /* 添加缩进虚线 */
  background-image: linear-gradient(to right, #3a3a3a 1px, transparent 1px);
  background-size: 2em 100%; /* 根据你的缩进宽度调整 */
}

code {
  background: #2d2d2d !important;
  color: #d4d4d4 !important;
  padding: 0.2em 0.4em;
}

.token.string {
  color: #9ece6a !important; /* 柔和的绿色 */
  }
  
  .token.comment {
  color: #7f848e !important; /* 浅灰色 */
  font-style: italic;
  }
  
  /* 其他语法高亮颜色补充 */
  .token.keyword { color: #bb9af7 !important; } /* 紫色 */
  .token.function { color: #7aa2f7 !important; } /* 蓝色 */
  .token.number { color: #ff9e64 !important; } /* 橙色 */
  .token.operator { color: #89ddff !important; } /* 浅蓝色 */
  .token.punctuation { color: #c0caf5 !important; } /* 浅灰色 */

/* 表格 */
table {
  border-collapse: collapse;
  background: #2a2a2a;
}

th {
  background: #373737 !important;
  color: #7ec699;
}

td, th {
  border: 1px solid #404040 !important;
  padding: 0.8em;
}

/* 引用块 */
blockquote {
  border-left: 4px solid #3a3a3a;
  background: #202020;
  color: #9e9e9e;
  margin-left: 0;
  padding: 1em 1.5em;
}

/* 列表 */
ul, ol {
  padding-left: 1.5em;
}

li::marker {
  color: #79b8ff;
}

/* 链接 */
a {
  color: #79b8ff !important;
  text-decoration: none;
  border-bottom: 1px solid #79b8ff55;
}

a:hover {
  color: #58a6ff !important;
  border-bottom-color: currentColor;
}

/* 增强加粗语法可读性 */
strong, b {
  color: #f8f8f2 !important; /* 使用更醒目的浅黄色 */
  font-weight: 600; /* 适当增加字重 */
  }
  
  /* 优化代码块显示 */
  pre {
  position: relative; /* 为滚动条定位做准备 */
  overflow-x: auto; /* 添加横向滚动条 */
  padding: 1.2rem !important;
  }
  
  /* 表格隔行变色增强可读性 */
  tr:nth-child(even) {
  background: #2f2f2f !important;
  }
  
  /* 图片自适应调整 */
  img {
  max-width: 90%;
  display: block;
  margin: 1.5rem auto;
  border: 1px solid #404040;
  border-radius: 4px;
  }
  
  /* 水平线样式优化 */
  hr {
  border: 0;
  height: 1px;
  background: #404040;
  margin: 2rem 0;
  }
  
  /* 代码块滚动条美化 */
  pre::-webkit-scrollbar {
  height: 6px;
  background: #1f1f1f;
  }
  
  pre::-webkit-scrollbar-thumb {
  background: #4d4d4d;
  border-radius: 3px;
  }
  
  /* 列表优化 */
  li {
  margin: 0.4rem 0;
  padding-left: 0.3rem;
  }
  
  /* 键盘标签样式 */
  kbd {
  background: #373737;
  border: 1px solid #4a4a4a;
  border-radius: 3px;
  padding: 0.1em 0.4em;
  font-family: monospace;
  }
  
  /* 数学公式块 */
  .mathjax-block {
  padding: 1em;
  background: #252526;
  border-radius: 4px;
  margin: 1.2rem 0;
  }


/* 修改所有连接线颜色 */
.mermaid path,
.mermaid line {
stroke: #cccccc !important; /* 浅灰色 */
}

/* 修改箭头颜色 */
.mermaid marker path {
fill: #cccccc !important;
stroke: #cccccc !important;
}

/* 可选：修改文字颜色 */
.mermaid .edgeLabel {
color: #999999 !important;
}