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;
  }
}
posted @ 2020-10-23 15:36  木子墨墨  阅读(1624)  评论(0编辑  收藏  举报