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

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

常见样式类型和示例

1. 全局字体样式：

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

2. 标题样式：

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

3. 段落样式：

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

4. 链接样式：

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

5. 代码块样式：

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

6. 表格样式：

   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 公式样式：

   .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 文件。例如：

     "markdown-preview-enhanced.styles": [
       "file:///C:/Users/YourName/style.less"
     ]
     

   • 将路径 C:/Users/YourName/style.less 替换为你的实际路径。

通过自定义 style.less 文件，你可以全面控制 Markdown 预览的样式，使其符合你的审美和需求。