VSCODE 驯服日记（二）对MPE的格式进行调整

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

常见样式类型和示例

全局字体样式：

body {font-family: "Arial", sans-serif; /* 设置全局字体 */font-size: 16px; /* 设置全局字体大小 */line-height: 1.6; /* 设置全局行高 */
}

标题样式：

h1 {font-size: 2em; /* 设置一级标题字体大小 */color: #333; /* 设置一级标题颜色 */
}h2 {font-size: 1.5em; /* 设置二级标题字体大小 */color: #444; /* 设置二级标题颜色 */
}

段落样式：

p {margin: 1em 0; /* 设置段落的上下间距 */color: #666; /* 设置段落字体颜色 */
}

链接样式：

a {color: #007acc; /* 设置链接颜色 */text-decoration: none; /* 移除链接下划线 */
}a:hover {text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

代码块样式：

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

表格样式：

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

自定义 LaTeX 公式样式：

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

配置 `Markdown Preview Enhanced` 插件

打开 VSCode 设置：
- 使用快捷键 Ctrl+, 或者通过菜单 File -> Preferences -> Settings 打开设置。
搜索 Markdown Preview Enhanced：
- 在设置搜索栏中输入 Markdown Preview Enhanced。
找到 Markdown Preview Enhanced: Style 设置：
- 在设置中找到 Markdown Preview Enhanced: Styles，点击 Edit in settings.json。
编辑 settings.json 文件：
- 在打开的 settings.json 文件中，添加或编辑 markdown-preview-enhanced.styles 条目，指向你的 style.less 文件。例如：
```
"markdown-preview-enhanced.styles": ["file:///C:/Users/YourName/style.less"
]
```
- 将路径 C:/Users/YourName/style.less 替换为你的实际路径。