当前位置: 首页 > news >正文

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;
}
http://www.dtcms.com/a/122277.html

相关文章:

  • vue+d3js+fastapi实现天气柱状图折线图饼图
  • XXE漏洞深度解析:原理、利用与防御
  • 详细解读react框架中的hooks
  • 从零推导飞机小扰动运动线性方程——0. 学习目录
  • Git版本管理系列:(二)多分支操作
  • 数据结构与算法-图论-复习2(差分约束,强连通分量,二分图,LCA,拓扑排序,欧拉路径和欧拉回路)
  • 使用stream的Collectors.toMap()方法常见问题
  • 数字电子技术基础(四十一)——数据选择器
  • 【Python教程】Python爬虫代码实现Java核心数据整理
  • python 如何安装wxpython
  • Meta 最新 AI 模型系列 ——Llama 4
  • COM通信 - TJA1145收发器
  • 数字图像处理作业2
  • 【回眸】Linux 内核 (十六) 之 多线程编程 下
  • 基于Python的心衰疾病数据可视化分析系统
  • 【论文精读】Multi-scale Neighbourhood Feature Interaction Network
  • JavaScript Hook JSON.stringify和JSON.parse:逆向与修改实战指南
  • AWS弹性容器服务(AWS Elastic Container Service,ECS)概述
  • js中this指向问题
  • deque容器
  • 排序算法(快速排序,选择排序......)【泪光2929】
  • FPGA_modelsim错误总结
  • 一、简单的 Django 服务
  • 软考 系统架构设计师系列知识点 —— 设计模式之工厂模式
  • 518. Coin Change II
  • React中使用dnd-kit实现拖拽排序
  • ASP Response
  • 分布式存储系统Ceph
  • 微信小程序:动态表格实现,表头单元格数据完全从data中获取,宽度自定义,自定义文本框,行勾选,样式效果,横向滚动表格(解决背景色不足的问题)等
  • TCP重传率高与传输延迟问题