自定义 CSS

style.less

要自定义 css，cmd-shift-p 然后运行 Markdown Preview Enhanced: Customize Css

style.less 文件将会被打开，然后你就可以开始编写样式了：

style.less 文件位于 ~/.mume/style.less

  1. .markdown-preview.markdown-preview {
  2.   // 在这里编写你的样式
  3.   // 例如：
  4.   //  color: blue;          // 改变字体颜色
  5.   //  font-size: 14px;      // 改变字体大小
  6.   // 自定义 pdf 导出样式
  7.   @media print {
  8.   }
  10.   // 自定义 prince pdf 导出样式
  11.   &.prince {
  12.   }
  14.   // 自定义 phantomjs png/jpeg 导出样式
  15.   &.phantomjs-image {
  16.   }
  18.   // 自定义 phantomjs pdf 导出样式
  19.   &.phantomjs-pdf {
  20.   }
  22.   // 自定义 presentation 样式
  23.   .reveal .slides {
  24.     // 修改所有幻灯片
  25.   }
  27.   // 自定义 presentation 样式
  28.   .slides > section:nth-child(1) {
  29.     // 修改 `第 1 个幻灯片`
  30.   }
  31. }
  33. .md-sidebar-toc.md-sidebar-toc {
  34.   // 边栏目录样式
  35. }

本地样式

Markdown Preview Enhanced 允许你对于不同的 markdown 文件定义不同的样式。
你可以在 front-matter 设置 markdown 文档的 id 和 class。
你可以在你的 markdown 文件中非常简单地 引用 less 或者 css 文件。 

  1. ---
  2. id: "my-id"
  3. class: "my-class1 my-class2"
  4. ---
  6. @import "my-style.less"
  8. # Heading1

my-style.less 如下： 

  1. #my-id {
  2.     background-color: #222;
  3.     color: #fff;
  5.     h1, h2, h3, h4, h5, h6 {
  6.         color: #fff;
  7.     }
  8. }

每一次你更新了你的 less 文件，你都需要点击 刷新按钮 来重新编译 less 到 css。

4.1 自定义 CSS - 图1

改编字体

要改变你的预览的字体，你需要首先下载字体文件 (.ttf)，然后编辑 style.less 如下： 

  1. .markdown-preview.markdown-preview {
  2.   @font-face {
  3.     font-family: 'your-font-family';
  4.     src: url('your-font-file-url');
  5.   }
  7.   font-family: 'your-font-family' sans-serif;
  9.   h1, h2, h3, h4, h5, h6, pre, code {
  10.     font-family: 'your-font-family' sans-serif;
  11.   }
  12. }

推荐使用在线的字体，例如从 google fonts 获得。