本项目提供了一个标准样式模板,可以通过设置变量(颜色、字号等)的方式快速开发一个新的预览主题。
可以从其他工具 / 平台的主题中获取灵感:
- 掘金的主题:https://github.com/xitu/juejin-markdown-themes
- typora 的主题:http://theme.typora.io/
- Hexo 的主题:https://hexo.io/themes/
- ...
欢迎贡献新的主题 🎉 !
example.md // 预览模板
src
├── views // HTML
└── themes // 主题目录
├── bear-palettes/ // bear 不同主题的配色方案
├── core/ // 基础样式模板
├── prism-themes/ // prism 代码高亮主题
├── variables/ // 不同主题的 scss 变量
├── mweb-xxx.scss // mweb 主题
└── typora-xxx.scss // typora 主题
环境:node v12 及以上。
# 克隆本仓库
git clone imageslr/mweb-themes
# 进入此目录
cd mweb-themes
# 安装依赖
npm install
# 编译并预览 mweb 主题:
npm run watch <theme_file_path>
# 编译并预览 typora 主题:
npm run typora-watch <theme_file_path>
<theme_file_path>
是主题文件的路径,例如 src/themes/mweb-default.scss
。运行后,终端会输出一个地址,例如 http://localhost:3000
。在浏览器中打开,即可预览主题。之后更改主题文件,浏览器会实时刷新。
- 在
src/themes
目录下创建新的主题文件mweb-xxx.scss
或typora-xxx.scss
- 编写样式内容
- 在
src/themes/mweb-config.js
或src/themes/typora-config.js
中增加主题配置项
代码使用 SCSS 编写,需要编译为 .css
文件才能在 MWeb 或 Typora 中使用:
npm run compile # 生成 MWeb3 的 css 文件
npm run compile -- --platform mweb4 --distDir dist/mweb4 # 生成 MWeb 4.2+ 的 mwebtheme 文件
npm run compile-mweb4 # 等同于上一条命令
npm run compile -- --platform typora --distDir dist/typora # 生成 Typora 的 css 文件
npm run compile-typora # 等同于上一条命令
参数:
--file
:编译特定的主题文件,默认为空,即生成所有主题文件--themeDir
:主题文件所在目录,默认为src/themes
--distDir
:生成的 CSS 文件所在目录,默认为dist/themes
--platform
:生成哪个平台的主题,默认为mweb3
(处理mweb-xxx.scss
),可选mweb4
、typora
(处理typora-xxx.scss
)
注意:传递参数时,必须添加 --
分隔符。
- 代码块:
pre code[class*="language-"]
- 代码块语法颜色:见
prism.scss
-
所有样式内容放在
#write
块内 -
代码块:
pre.md-fences, pre.md-meta-block, .md-rawblock-control:not(.md-rawblock-tooltip) .md-rawblock-input { color: #f8f8f2; background: #272822; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 1em; }
-
代码块指针颜色:
.CodeMirror div.CodeMirror-cursor { border-color: $font-color; }
-
代码块语法颜色:见
typora-bear.scss
→.cm-s-inner {}
// 代码高亮 CodeMirror .cm-s-inner { // .cm-meta ? // .cm-hr ? // .cm-link ? .cm-comment { color: $prism-color-comment; } .cm-property, .cm-tag { // html tag,需要在 bracket 之前 color: $prism-color-property; } .cm-bracket, // <、> .cm-punctuation { color: $prism-color-punctuation; } .cm-number { color: $prism-color-number; } .cm-qualifier, // css selector .cm-string, .cm-string-2, // 2 什么意思? .cm-builtin { color: $prism-color-selector; } .cm-attribute { color: $prism-color-attr-name; } .cm-operator { color: $prism-color-operator; } .cm-atom, // null, true, false .cm-keyword { color: $prism-color-keyword; } .cm-def, // 变量声明语句中的变量名 .cm-variable, .cm-variable-2, .cm-variable-3 { // 2, 3 什么含义? color: $prism-color-variable; } .cm-type { // type 什么含义? color: darken($prism-color-variable, 25%); } }
-
任务列表:
$primary-color: #353535; // 复选框选中时的背景颜色,建议和加粗字体的颜色一致 $del-font-color: #525252; // 复选框选中时的字体颜色 $body-bg-color: white; // 复选框未选中时的背景颜色 $border-color: #bfbfbf; // 复选框未选中时的边框颜色,建议和表格边框的颜色一致 // task list .task-list-item { padding-left: 0.3rem list-style-type: none;; > p { transition: color 0.3s, opacity 0.3s; } &.task-list-done > p { color: $del-font-color; text-decoration: line-through; > .md-emoji { opacity: .5; } > .md-link > a { opacity: .6; } } > input { -webkit-appearance: initial; display: block; position: absolute; border: 1px solid $border-color; border-radius: .25rem; // margin-top: .1rem; margin-left: -1.5rem; height: 1.2rem; width: 1.2rem; transition: border-color 0.3s; background-color: $body-bg-color; } > input:focus { outline: none; box-shadow: none; } > input:hover { border-color: $primary-color; } > input[checked] { &::before { content: ''; position: absolute; top: 20%; left: 50%; height: 60%; width: 2px; transform: rotate(40deg); background: $primary-color; } &::after { content: ''; position: absolute; top: 46%; left: 25%; height: 30%; width: 2px; transform: rotate(-40deg); background: $primary-color; } } }
-
字体粗细:typora 的
base.css
里设置了-webkit-font-smoothing: antialiased
,会导致字体看起来更细。我们需要指定-webkit-font-smoothing: auto
以覆盖这个样式。
MWeb 使用 PrismJS 来高亮代码块中的语法,可以自己查找 PrismJS 主题并配置颜色代码。
- 在 PrismJS 官网 选择一个主题,进入下载页查看其 CSS 代码(拉到下载页底部就可以看到)
- 在
themes/prism-themes
目录下创建文件xxx.scss
- 按需更改颜色代码
- 更改
mweb-xxx.scss
中引用的 prism 主题文件
社区提供的 PrismJS 主题:
这是因为 MWeb 3.x 使用了基础版的 PrismJS,只支持部分语言,需要自行更新。
- 前往 PrismJS 官网,在
Languages
下方勾选Select/unselect all
,然后拉到底部点击Download JS
- 把下载的
prism.js
文件移动到/Applications/MWeb.app/Contents/Resources/PreviewAsset/prism
文件夹 - 重启 MWeb
编辑器主题是 .style
文件,内容和 CSS 大同小异,请自行更改。