vscode md样式自定义
vscode md插件安装
### Markdown Preview Enhanced
具体的使用可以查看官网文档。
https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/customize-css
- 插件安装完成后 右上角图表可以设置侧边展示,或者侧边单独的展示区域(不受vscode 主体背景色影响)
### 样式自定义
打开命令面版 输入如下
Markdown Preview Enhanced: Customize Css
编辑自己的样式--我直接找的其它人的css
.markdown-preview.markdown-preview {
// 在这里编写你的样式
// 例如:
// color: blue; // 改变字体颜色
// font-size: 14px; // 改变字体大小
// 自定义 pdf 导出样式
@media print {
}
// 自定义 prince pdf 导出样式
&.prince {
}
// 自定义 presentation 样式
.reveal .slides {
// 修改所有幻灯片
}
// 自定义 presentation 样式
.slides > section:nth-child(1) {
// 修改 第 1 个幻灯片
}
}
.md-sidebar-toc.md-sidebar-toc {
// 边栏目录样式
}
css 样式地址:选择你中意的 http://md.aclickall.com/
直接 复制到你的 style.less 中保存就OK了。然后你就可以看到效果了
直接引用本地样式 -我没用过
Markdown Preview Enhanced 允许你对于不同的 markdown 文件定义不同的样式。 你可以在 front-matter 设置 markdown 文档的 id 和 class。 你可以在你的 markdown 文件中非常简单地 引用 less 或者 css 文件。
---
id: "my-id"
class: "my-class1 my-class2"
---
@import "my-style.less"
# Heading1
my-style.less 如下:
#my-id {
background-color: #222;
color: #fff;
h1,
h2,
h3,
h4,
h5,
h6 {
color: #fff;
}
}