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
替换为你的实际路径。
- 在打开的
通过自定义 style.less
文件,你可以全面控制 Markdown 预览的样式,使其符合你的审美和需求。
原文地址:https://blog.csdn.net/qq_36492090/article/details/140509220
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!