Skip to content

Latest commit

 

History

History
265 lines (206 loc) · 7.98 KB

develop.md

File metadata and controls

265 lines (206 loc) · 7.98 KB
Raw

开发主题

本项目提供了一个标准样式模板，可以通过设置变量（颜色、字号等）的方式快速开发一个新的预览主题。

可以从其他工具 / 平台的主题中获取灵感：

欢迎贡献新的主题 🎉 ！

目录结构

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。在浏览器中打开，即可预览主题。之后更改主题文件，浏览器会实时刷新。

新增主题

  1. 在 src/themes 目录下创建新的主题文件 mweb-xxx.scss 或 typora-xxx.scss
  2. 编写样式内容
  3. 在 src/themes/mweb-config.js 或 src/themes/typora-config.js 中增加主题配置项

生成 CSS 文件

代码使用 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)

注意：传递参数时，必须添加 -- 分隔符。

MWeb 主题开发

  1. 代码块：pre code[class*="language-"]
  2. 代码块语法颜色：见 prism.scss

Typora 主题开发

  1. 所有样式内容放在 #write 块内

  2. 代码块：

    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;
}

  3. 代码块指针颜色：.CodeMirror div.CodeMirror-cursor { border-color: $font-color; }

  4. 代码块语法颜色：见 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%);
    }
}

  5. 任务列表：

    $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;
        }
    }
}

  6. 字体粗细：typora 的 base.css 里设置了 -webkit-font-smoothing: antialiased，会导致字体看起来更细。我们需要指定 -webkit-font-smoothing: auto 以覆盖这个样式。

Q & A

如何自定义代码块的主题？

MWeb 使用 PrismJS 来高亮代码块中的语法，可以自己查找 PrismJS 主题并配置颜色代码。

  1. 在 PrismJS 官网 选择一个主题，进入下载页查看其 CSS 代码（拉到下载页底部就可以看到）
  2. 在 themes/prism-themes 目录下创建文件 xxx.scss
  3. 按需更改颜色代码
  4. 更改 mweb-xxx.scss 中引用的 prism 主题文件

社区提供的 PrismJS 主题：

代码块语法没有正确高亮？

这是因为 MWeb 3.x 使用了基础版的 PrismJS，只支持部分语言，需要自行更新。

  1. 前往 PrismJS 官网，在 Languages 下方勾选 Select/unselect all，然后拉到底部点击 Download JS
  2. 把下载的 prism.js 文件移动到 /Applications/MWeb.app/Contents/Resources/PreviewAsset/prism 文件夹
  3. 重启 MWeb

如何自定义 MWeb 编辑器主题？

编辑器主题是 .style 文件，内容和 CSS 大同小异，请自行更改。