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

相关推荐
空影星1 小时前
SiriKali,一款跨平台的加密文件管理器
python·编辑器·电脑·智能硬件
TLucas1 小时前
Layui连线题编辑器组件(ConnectQuestion)
前端·编辑器·layui
添砖java‘’7 小时前
vim高效编辑:从入门到精通
linux·编辑器·操作系统·vim
不吃凉粉8 小时前
Android Studio USB串口通信
android·ide·android studio
编程乐学10 小时前
安卓非原创--基于Android Studio 实现的天气预报App
android·ide·android studio·课程设计·大作业·天气预报·安卓大作业
非得登录才能看吗?12 小时前
VScode 入门(设置篇)
ide·vscode·编辑器
Costrict15 小时前
解锁新阵地!CoStrict 现已支持 JetBrains 系列 IDE
大数据·ide·人工智能·深度学习·自然语言处理·ai编程·visual studio
AlphaFinance15 小时前
Windows下Vscode连接到WSL的方法
ide·vscode·编辑器
Dobby_0516 小时前
【Go】C++ 转 Go 第(二)天:变量、常量、函数与init函数
vscode·golang·go
空影星1 天前
Tablecruncher,一款轻量级CSV编辑器
python·编辑器·电脑·智能硬件