KnowHowAI

03-✨文档美化演示

7分钟阅读

✨ Markdown 文档美化演示

本文展示各种 Markdown 美化技巧，让知识讲解更加生动形象。

1. 标题层级

二级标题

三级标题

四级标题

2. 代码块（语法高亮）

# Python 示例
def calculate_fibonacci(n):
    """计算斐波那契数列"""
    if n <= 1:
        return n
    return calculate_fibonacci(n-1) + calculate_fibonacci(n-2)
 
# 使用列表推导式
fib_list = [calculate_fibonacci(i) for i in range(10)]
print(fib_list)
// JavaScript 示例
const fetchData = async (url) => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('请求失败:', error);
  }
};
# Bash 命令示例
git clone https://github.com/user/repo.git
cd repo
npm install
npm run dev

3. 表格

技能对比表

特性MCPRuleCommandSkillSubagent
作用域基础设施项目级会话级项目/用户级任务级
持久性✅ 持久✅ 持久❌ 临时✅ 持久❌ 临时
复杂度低低低高高
典型用途外部 API代码规范快捷操作复杂任务多专家协作

渐进式揭示模式

模式适用场景描述
功能分层多功能模块每个功能链接到独立的参考文件
领域分离复杂业务域每个领域有专门的参考文档
难度分层学习路径快速/标准/高级三级
条件触发动态需求根据特定条件加载
按需深度可变复杂度用户或 AI 决定所需深度

4. 列表

无序列表

  • Cursor AI 是一款 AI 编码助手
    • 基于 Claude 模型
    • 支持 VS Code 插件
    • 拥有丰富的技能系统
  • 主要功能包括：
    • 代码补全
    • 代码解释
    • 错误修复
    • 重构建议

有序列表

  1. 创建一个新的 Skill
    1. 运行 npx skills init my-skill
    2. 编辑 SKILL.md 文件
    3. 添加必要的脚本和参考文件
  2. 测试 Skill 功能
  3. 发布到 Skills 仓库

任务列表

  • 安装 obsidian 技能
  • 安装 writing-skills 技能
  • 学习 Mermaid 图表
  • 创建自己的 Skill

5. 引用块

提示：渐进式揭示是 Skill 设计的核心原则。

根据用户需求动态调整信息加载深度，既能保持简洁，又能提供充分上下文。

警告：避免在 SKILL.md 中超过 500 行代码。将详细信息移至 references/ 目录。

6. Mermaid 图表

流程图 - Skill 加载流程

flowchart TD
    A[用户请求] --> B{触发条件?}
    B -->|是| C[加载 SKILL.md]
    B -->|否| D[仅加载元数据]

    C --> E{需要更多细节?}
    E -->|是| F[加载 references/]
    E -->|否| G[完成任务]

    D --> G
    F --> G

    style A fill:#e1f5ff
    style G fill:#d4edda

序列图 - 多 Agent 协作

sequenceDiagram
    participant User as 用户
    participant Orchestrator as 编排器
    participant ExpertA as 专家 A
    participant ExpertB as 专家 B

    User->>Orchestrator: 提交复杂任务
    Orchestrator->>ExpertA: 分配子任务 A
    Orchestrator->>ExpertB: 分配子任务 B

    ExpertA-->>Orchestrator: 返回结果 A
    ExpertB-->>Orchestrator: 返回结果 B

    Orchestrator->>Orchestrator: 整合结果
    Orchestrator-->>User: 返回最终答案

甘特图 - 学习计划

gantt
    title Cursor AI 学习路线
    dateFormat  YYYY-MM-DD
    section 基础
    Cursor 入门        :a1, 2024-01-01, 7d
    section 进阶
    Skills 深度探索     :b1, 2024-01-08, 10d
    Subagent 协作模式  :b2, 2024-01-18, 7d
    Skill 设计指南      :b3, 2024-01-25, 10d
    section 实践
    创建自己的 Skill   :c1, 2024-02-05, 14d

思维导图 - Cursor 特性

mindmap
  root((Cursor AI))
    核心特性
      AI 编码
      自然语言交互
      上下文理解
    功能系统
      MCP
      Rule
      Command
      Skill
      Subagent
    设计原则
      渐进式揭示
      适度自由
      简洁高效
    应用场景
      代码生成
      代码审查
      文档编写
      问题调试

状态图 - 任务流转

stateDiagram-v2
    [*] --> Pending: 创建任务
    Pending --> InProgress: 开始执行
    InProgress --> Completed: 完成
    InProgress --> Blocked: 遇到阻塞
    Blocked --> InProgress: 阻塞解除
    Blocked --> Deleted: 取消任务
    Completed --> [*]
    Deleted --> [*]

类图 - Skill 结构

classDiagram
    class Skill {
        +name: string
        +description: string
        +metadata: object
        +SKILL.md: string
        +scripts/: Directory
        +references/: Directory
        +assets/: Directory
        +loadMetadata()
        +loadCore()
        +loadReferences()
    }

    class Metadata {
        +name
        +description
        +version
    }

    Skill --> Metadata

7. 分隔线

8. 徽章/标签

技术栈

技术栈

  • JavaScript / TypeScript
  • Python
  • C/C++

小贴士

使用折叠区块可以收纳大量细节，保持主文档整洁。

注意

SKILL.md 文件建议控制在 500 行以内。

示例

这是一个示例区块，可以展示代码片段或案例。

成功

技能安装成功！

失败

网络连接超时，请重试。

9. 折叠区块

📖 点击展开：Cursor 命令列表
命令描述
@cursor唤起 Cursor 助手
Ctrl/Cmd + K编辑模式
Ctrl/Cmd + L对话模式
Ctrl/Cmd + I搜索代码
🔧 点击展开：配置文件示例 
{
  "name": "my-awesome-skill",
  "description": "An awesome skill for Claude Code",
  "version": "1.0.0",
  "agent": {
    "compatible": ["claude-code", "cursor"]
  }
}

10. 表情符号装饰

🎯 学习路径

  1. 🏁 入门 - 了解 Cursor 基础概念
  2. 📚 进阶 - 掌握 Skills 和 Subagent
  3. 🚀 精通 - 创建自己的技能
  4. 🎨 创作 - 分享到社区

🛠️ 工具箱

  • 📝 写作 - writing-skills
  • 📊 图表 - mermaid-diagrams
  • 📦 管理 - Obsidian 集成

11. 内联样式

一些编辑器支持内联 HTML 样式：

加粗文字 和 斜体文字 和 删除线

高亮文字（Obsidian 支持）

上标 和 下标

小结

Markdown 美化可以让知识讲解更加直观生动，主要技巧包括：

类别技巧
结构标题层级、分隔线
代码语法高亮、行号
数据表格、列表
视觉Mermaid 图表、徽章
交互折叠区块、任务列表

选择合适的技巧，让文档既美观又实用！

关系图谱

反向链接