写了几款漂亮的 Markdown 主题样式

最近开发的一款基于Electron的软件需要简洁的页面展示，而展示内容主要来源于Markdown文档，所以写了几款Markdown主题样式。由于主题并不多，所以我这里用十二生肖来依次命名。该页面使用的是博客默认主题，就用 Mouse 来命名吧。

示例标题

示例文本。Markdown是一个将文本转化为HTML的工具。简单来说，Markdown是一个兼顾可读性与易用性的轻量级标记体系。Markdown并不追求大而全，它只关心HTML里最常用的几个标记，对于一些不常用的标记它允许直接将HTML标记插入文本。

Mouse 整体以黄色为点缀色，现在看到的文档正是使用了改主题，Sean的博客 也使用了该主题。

在 Mouse 的基础上，我扩展了若干种新主题，可以在不同页面环境中使用，所有的主题都适合显示中文。

示例列表样式

• 发布博客、编写文档
• 渲染API接口文档

1. 整理学生知识和笔记
2. 发布日记，杂文，所见所想

其他常用样式

这是一条删除线，删除线覆盖的字体会被渲染为灰色；这是 斜体字；这是一条链接样式，点击后会跳转到百度首页。这是水：H₂O；这是二氧化碳：CO₂；这是一段代码：

let jock = function (value) {
    return value == true ? false : true;
}

这是一条分割线：

这是 标签，这是一个 TODO 列表 示例：

• 如果明天买了猫，就把狗卖掉
• 如果今天不买猫，就把狗卖掉

这是一张示意图片：

修改主题配色

可以通过修改 .less 文件的变量定义来实现修改配置，变量列举如下：

// global define
@shadow-default: 0px 5px 60px 0px rgba(17, 58, 93, 0.1);
@bdr-radius: .5rem;

// color define
@color-theme: #ffc107;
@color-dk-theme: darken(@color-theme, 20%);
@color-theme-rgba: rgba(255, 193, 7, .35);
@color-text: #6c757d;
@color-dk-text: darken(@color-text, 20%);
@color-justfy: #2f3137;
@color-dk-justfy: darken(@color-justfy, 20%);
@color-light: #eee;

// text line-height
@lh-text: 1.6;
@lh-head: 1.8;

// text font-size
@fs-base: 16px;
@fs-text: 1rem;
...