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

相关推荐
网硕互联的小客服23 分钟前
如何解决Ubuntu下vi编辑器方向键变字母的问题?
编辑器
老黄编程4 小时前
VSCode 的百度 AI编程插件
ide·vscode·ai编程
老黄编程5 小时前
VSCode AI编程插件
ide·vscode·ai编程
雨声不在6 小时前
使用android studio分析cpu开销
android·ide·android studio
Naiva6 小时前
ESP32-C3 入门09:基于 ESP-IDF + LVGL + ST7789 的 1.54寸 WiFi 时钟(SquareLine Studio 移植)
ide·笔记·vscode
return(b,a%b);9 小时前
VSCode 远程开发连接(glibc<2.28)
ide·vscode·编辑器
speop9 小时前
vscode使用tmux技巧
ide·vscode·编辑器
人工干智能10 小时前
建自己的Python项目仓库,使用工具:GitHub(远程仓库)、GitHub Desktop(版本控制工具)、VSCode(代码编辑器)
python·编辑器·github
程序员三明治12 小时前
Python编辑器的安装及配置(Pycharm、Jupyter的安装)从0带你配置,小土堆视频
python·pycharm·编辑器
理想国的女研究僧12 小时前
Jupyter Notebook操作指南(1)
ide·python·学习·jupyter