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 预览的样式,使其符合你的审美和需求。

相关推荐
陈言必行12 小时前
Unity 性能优化 之 编辑器创建资源优化( 工作流 | 场景 | 预制体)
unity·编辑器·游戏引擎
CAE虚拟与现实20 小时前
VSCode中的下载VSIX是指什么?
ide·vscode·编辑器
路边闲人21 天前
vscode启用GEMINI CODE ASSIST插件
ide·vscode·gemini
小蕾Java1 天前
Java 开发工具,最新2025 IDEA使用(附详细教程)
java·ide·intellij-idea
CAE虚拟与现实1 天前
VSCode官方汉化包
ide·vscode·编辑器·vscode汉化
CAE虚拟与现实1 天前
VSCode创建Python项目和运行py文件
ide·vscode·编辑器
资讯第一线1 天前
《RAD Studio 13.0》 [DELPHI 13.0] [官方原版IOS] 下载
ide
过-眼-云-烟1 天前
新版Android Studio能打包但无法run ‘app‘,编译通过后手机中没有安装,顶部一直转圈
android·ide·android studio
Stardep1 天前
ssh远程连接服务器到vscode上“连接失败”
服务器·vscode·ssh
扯淡的闲人1 天前
多语言编码Agent解决方案(4)-Eclipse插件实现
java·ide·eclipse