Clarity 主题样式展示

一个融合 vlook 美学与极致性能的 Typora 主题

一、标题层级

H1 一级标题 - 渐变下划线

H2 二级标题 - 蓝色装饰

H3 三级标题

H4 四级标题

H5 五级标题

H6 六级标题

二、文本样式

这是一段普通文本，包含 粗体强调 和 斜体强调，以及 粗斜体 组合。

这里有 ==荧光笔高亮效果==，鼠标悬停会扩大高亮范围。

这是 删除线效果，用红线划过文字。

这是 下划线效果，青色底边。

上标示例：E = mc^2^，下标示例：H~2~O

缩写示例：CSS 是样式表语言。

三、链接样式

这是一个 带动画的链接，悬停时下划线从右向左展开。

另一个 GitHub 链接 示例。

四、列表样式

无序列表

• 一级列表项 - 蓝色圆点
• 另一个一级项
  • 二级列表项 - 绿色圆圈
  • 另一个二级项
    • 三级列表项 - 橙色方块
    • 更多三级内容

有序列表

1. 第一项 - 蓝色圆形徽章
2. 第二项
   1. 嵌套第一项 - 绿色方形 (a, b, c)
   2. 嵌套第二项
      1. 更深层嵌套 - 橙色方形 (i, ii, iii)
      2. 继续嵌套
3. 第三项

任务列表

• 已完成任务 - 绿色勾选
• 另一个完成的任务
• 待办任务 - 圆形复选框
• 悬停有光晕效果

五、引用块

这是一个引用块，带有蓝色左边框和渐变背景。

可以包含多段内容。

嵌套引用也支持。

六、GitHub Alert 警告框

[!NOTE] 这是一个 注释 提示框，蓝色主题。 用于一般性说明信息。

[!TIP] 这是一个 提示 框，绿色主题。 用于有用的建议。

[!IMPORTANT] 这是一个 重要 提示框，紫色主题。 用于关键信息。

[!WARNING] 这是一个 警告 框，棕橙色主题。 用于需要注意的内容。

[!CAUTION] 这是一个 危险 提示框，红色主题。 用于危险操作提醒。

七、代码

行内代码（3色轮换）

使用 console.log() 输出，调用 useState() 钩子，返回 Promise 对象。

安装命令：npm install，然后 npm run dev，最后 npm build。

代码块

// JavaScript 示例
function greet(name) {
    console.log(`Hello, ${name}!`);
    return {
        message: `Welcome, ${name}`,
        timestamp: Date.now()
    };
}

greet('Clarity Theme');

# Python 示例
def fibonacci(n):
    """计算斐波那契数列"""
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print([fibonacci(i) for i in range(10)])

/* CSS 示例 */
.clarity-theme {
    --primary: #0b72d9;
    background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

八、表格

九、分隔线

上面和下面都是彩虹渐变分隔线：

彩虹渐变效果：青 → 蓝 → 紫 → 粉 → 橙

十、图片

十一、数学公式

行内公式：$E = mc^2$ 和 $\sum_{i=1}^{n} x_i$

块级公式：

十二、Mermaid 图表

graph LR
    A[开始] --> B{判断}
    B -->|是| C[处理]
    B -->|否| D[跳过]
    C --> E[结束]
    D --> E

sequenceDiagram
    participant U as 用户
    participant S as 服务器
    U->>S: 请求数据
    S-->>U: 返回结果

十三、折叠内容

十四、键盘按键

使用 Ctrl + C 复制

按 Cmd + Shift + P 打开命令面板

↑ ↓ ← → 方向键

十五、定义列表

Clarity

清晰、明了的意思，代表主题的设计理念

Performance

性能优先，文件仅 36KB，比 vlook 小 91%

VLOOK

参考的主题，拥有丰富的视觉效果

十六、特殊效果总结