VSCODE 驯服日记(二)对MPE的格式进行调整

在 VSCode 中使用 Markdown Preview Enhanced(MPE)插件时,可以自定义全局样式来调整 Markdown 预览的外观。通过编辑 style.less 文件,可以设置各种样式,例如字体、颜色、行间距等。以下是一些常见的自定义样式类型和示例:

常见样式类型和示例

  1. 全局字体样式

    less 复制代码
    body {
      font-family: "Arial", sans-serif; /* 设置全局字体 */
      font-size: 16px; /* 设置全局字体大小 */
      line-height: 1.6; /* 设置全局行高 */
    }
  2. 标题样式

    less 复制代码
    h1 {
      font-size: 2em; /* 设置一级标题字体大小 */
      color: #333; /* 设置一级标题颜色 */
    }
    
    h2 {
      font-size: 1.5em; /* 设置二级标题字体大小 */
      color: #444; /* 设置二级标题颜色 */
    }
  3. 段落样式

    less 复制代码
    p {
      margin: 1em 0; /* 设置段落的上下间距 */
      color: #666; /* 设置段落字体颜色 */
    }
  4. 链接样式

    less 复制代码
    a {
      color: #007acc; /* 设置链接颜色 */
      text-decoration: none; /* 移除链接下划线 */
    }
    
    a:hover {
      text-decoration: underline; /* 鼠标悬停时显示下划线 */
    }
  5. 代码块样式

    less 复制代码
    pre {
      background-color: #f5f5f5; /* 设置代码块背景颜色 */
      border: 1px solid #ddd; /* 设置代码块边框 */
      padding: 10px; /* 设置代码块内边距 */
      border-radius: 5px; /* 设置代码块圆角 */
    }
    
    code {
      font-family: "Courier New", monospace; /* 设置代码字体 */
      font-size: 0.9em; /* 设置代码字体大小 */
    }
  6. 表格样式

    less 复制代码
    table {
      width: 100%; /* 设置表格宽度 */
      border-collapse: collapse; /* 合并边框 */
    }
    
    th, td {
      border: 1px solid #ddd; /* 设置单元格边框 */
      padding: 8px; /* 设置单元格内边距 */
      text-align: left; /* 设置文本对齐方式 */
    }
    
    th {
      background-color: #f2f2f2; /* 设置表头背景颜色 */
      font-weight: bold; /* 设置表头字体加粗 */
    }
  7. 自定义 LaTeX 公式样式

    less 复制代码
    .katex {
      font-size: 1.1em; /* 设置 LaTeX 公式字体大小 */
    }
    
    .katex .text {
      font-family: "KaiTi", serif; /* 设置 LaTeX 公式中文字的字体 */
    }

配置 Markdown Preview Enhanced 插件

  1. 打开 VSCode 设置

    • 使用快捷键 Ctrl+, 或者通过菜单 File -> Preferences -> Settings 打开设置。
  2. 搜索 Markdown Preview Enhanced

    • 在设置搜索栏中输入 Markdown Preview Enhanced
  3. 找到 Markdown Preview Enhanced: Style 设置

    • 在设置中找到 Markdown Preview Enhanced: Styles,点击 Edit in settings.json
  4. 编辑 settings.json 文件

    • 在打开的 settings.json 文件中,添加或编辑 markdown-preview-enhanced.styles 条目,指向你的 style.less 文件。例如:

      json 复制代码
      "markdown-preview-enhanced.styles": [
        "file:///C:/Users/YourName/style.less"
      ]
    • 将路径 C:/Users/YourName/style.less 替换为你的实际路径。

通过自定义 style.less 文件,你可以全面控制 Markdown 预览的样式,使其符合你的审美和需求。

相关推荐
tan180°7 小时前
MySQL表的操作(3)
linux·数据库·c++·vscode·后端·mysql
万千思绪11 小时前
【PyCharm 2025.1.2配置debug】
ide·python·pycharm
我在看世界13 小时前
家里vscode连公司内网vscede
vscode·ssh
不想迷路的小男孩16 小时前
Android Studio 中Palette跟Component Tree面板消失怎么恢复正常
android·ide·android studio
AlickLbc16 小时前
在phpstudy环境下配置搭建XDEBUG配合PHPSTORM的调试环境
ide·phpstorm
悠悠小茉莉16 小时前
Win11 安装 Visual Studio(保姆教程 - 更新至2025.07)
c++·ide·vscode·python·visualstudio·visual studio
SZ17011023117 小时前
华为云 银河麒麟 vscode远程连接
ide·vscode·华为云
yanjiee18 小时前
需要scl来指定编译器的clangd+cmake在vscode/cursor开发环境下的配置
ide·vscode·编辑器
Waltt_Qiope21 小时前
关于使用cursor tunnel链接vscode(避免1006 issue的做法)
ide·vscode·issue
Charlene Fung1 天前
vs code远程自动登录服务器,无需手动输入密码的终极方案(windows版)
运维·服务器·vscode·ssh