Matoujie

一套清爽、温暖的 Typora 主题,专为沉静、高可读性的写作体验而设计。精心关注排版、对比度与 Unicode-range 字体隔离。

github.com/HAE8939/typora-theme
核心色板
--bg-color
#faf9f5
--code-bg
#f3f0e8
--border
#e6e0d4
Clay
#d97757 ★
悬停
#c4623f
柔和
#6b6b62
正文
#1a1a18
对比度检查 (WCAG)
正文文字样本
~16.1 : 1
✓ AAA — 正文阅读优秀
辅助文字样本
~5.8 : 1
✓ AA — 次级文字合格
微弱文字样本
~3.9 : 1
△ 仅达 AA 大字体标准
链接文字(仅颜色)
~4.6 : 1
✓ AA — 链接文字对比度
警告红文字
~5.9 : 1
✓ AA — 合格
Feature Card 正文
~9.6 : 1
✓ AAA — 深色卡片优秀
特性
🔤

字体隔离

Unicode-range 分离中英文渲染,独立 @font-face,互不干扰。

⚖️

字重解耦

英文 Inter Regular (400),中文 Noto Sans SC Light (300),视觉重量一致。

🎨

温暖配色

Clay + Ivory 色彩系统,兼顾美感与可读性。

📐

CSS 变量

完整的 Token 设计系统,便于自定义。

🔗

链接图标

外部链接自动显示图标,锚点链接自动排除。

🔘

按钮链接

[<kbd>按钮</kbd>](url) 实心 / 斜体描边 / 粗体深色三态,整行按钮自动居中。

🗂️

分栏排版

N 个 --- + N+1 个连续引用块 = 2~5 栏,适合并排对比与多方案展示。

📑

页签组

*tab* 标记 + 连续内容,导出 HTML 后轮换展示(可选插件)。

📋

代码块增强

悬停出现复制按钮、长代码自动折叠,编辑器与导出 HTML 均支持。

🖨️

PDF 导出优化

长代码块自动换行跨页、表格表头逐页重复、标题不落单,打印时隐藏链接图标。

Callout 卡片
Feature Card
深度聚焦模式
深色背景搭配 Clay 强调色,适合突出重要特性和核心概念。
Info Card
背景知识
象牙色背景搭配暖色边框,适合补充说明和背景信息。
Tip Card
小贴士
绿色语义,适合最佳实践、正面建议与操作提示。
Warning Card
注意事项
琥珀色语义,适合潜在风险与易出错操作的提醒。
Danger Card
警告提示
红色边框,适用于错误提示和危险操作提醒。
按钮链接

语法:[<kbd>标准按钮</kbd>](url) 实心 · *[…]* 描边 · **[…]** 深色;整行只有按钮时自动居中(上方虚线以下即为居中示例)。

分栏排版

左栏 / Left

分隔线加连续引用块组成,适合并排对比、多方案展示。

右栏 / Right

引用块与 Callout 卡片均可作为分栏成员,保留原有配色。

第一栏

使用两条分隔线。

第二栏

建议每栏长度相近。

第三栏

五栏同理。

语法:N 个 --- 后跟 N+1 个连续引用块 = N+1 栏(上为双栏,下为三栏)。

页签组
每个面板第一行若是独立加粗行,会自动作为页签标签。

语法:连续内容前空一行写 *tab*;需配合导出插件,导出 HTML 后生效,编辑器内不做转换。

排版示例

标题示例

这是一段展示主题排版效果的示例文字。字体系统使用 Inter 渲染英文,Noto Sans SC 渲染中文,通过 Unicode-range 隔离避免视觉冲突。

行内 代码 使用 JetBrains Mono,支持连字。链接仅用颜色区分:示例链接

字体系统
Inter
The quick brown fox
300 · 400 · 500 · 700
Noto Sans SC
信息美感与秩序
300 · 400 · 500 · 700
JetBrains Mono
const theme = {}
400 · 400i · 500
语法高亮
注释
#a08060
关键字
#b04a32
数字
#b45309
字符串
#5d7a10
标签
#c03535
标识符
#3b2f2a
安装指南

1. 在 Typora 中打开 设置 → 外观 → 打开主题文件夹

2. 复制 matoujie.css 和 fonts/ 目录到主题文件夹

3. 重启 Typora

4. 在 主题 菜单中选择 Matoujie

可选插件:编辑器内代码复制 / 长码折叠(注入 matoujie-editor.js)、导出 HTML 增强(页签组 + 代码复制,粘贴 matoujie-plugin.txt)。完整步骤见 README。