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

相关推荐
AllData公司负责人23 分钟前
实时开发IDE部署指南
大数据·ide·开源
TOSUN同星4 小时前
干货分享 | TSMaster DBC编辑器操作指南:功能详解+实战示例
数据库·oracle·编辑器·汽车·软件工程
LIN-JUN-WEI5 小时前
[ESP32]VSCODE+ESP-IDF环境搭建及blink例程尝试(win10 win11均配置成功)
c语言·开发语言·ide·vscode·单片机·学习·编辑器
MUTA️10 小时前
pycharm中本地Docker添加解释器
ide·python·pycharm
Ronin30511 小时前
【Linux系统】vim编辑器 | 编译器gcc/g++ | make/Makefile
linux·运维·服务器·ubuntu·编辑器·vim
织_网12 小时前
Visual Studio Code 中统一配置文件在团队协作中的应用
ide·vscode·编辑器
界面开发小八哥20 小时前
「Java EE开发指南」如何用MyEclipse创建一个WEB项目?(三)
java·ide·java-ee·myeclipse
花花鱼21 小时前
android studio 设置让开发更加的方便,比如可以查看变量的类型,参数的名称等等
android·ide·android studio
雷羿 LexChien1 天前
从 Prompt 管理到人格稳定:探索 Cursor AI 编辑器如何赋能 Prompt 工程与人格风格设计(上)
人工智能·python·llm·编辑器·prompt
到底起什么网名才能不重名1 天前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html