VS Code Markdown渲染配置

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;
}