返回列表
阅读进度
0%
Design System

Markdown 样式指南与排版测试

本文档用于展示和测试博客详情页面的所有 Markdown 元素样式,包括标题层级、列表、表格、代码块、引用和图片等。

Design System

Design System

System Admin

一级标题 H1 (通常由文章标题处理,正文很少用)

这是正文段落。我们的设计系统采用了Enterprise Minimalist理念,强调内容的清晰度和阅读体验。正文文本应该具有良好的可读性,行高适中。

二级标题 H2:主要章节

这是二级标题下的内容。我们来测试一下各种文本样式:

  • 加粗文本 (Bold)
  • 斜体文本 (Italic)
  • 删除线 (Strikethrough)
  • 链接样式 (Link)
  • 行内代码 (Inline Code)

三级标题 H3:子章节

这里测试无序列表:

  • 列表项 1
  • 列表项 2
    • 嵌套列表项 A
    • 嵌套列表项 B
  • 列表项 3

四级标题 H4:微标题

这里测试有序列表:

  1. 第一步操作
  2. 第二步操作
  3. 第三步操作

引用区块 (Blockquotes)

这是一个标准的引用区块。设计系统中的引用样式应该醒目但不喧宾夺主,通常用于引用名言、强调重点或提供额外信息。

支持多行引用。

代码块 (Code Blocks)

下面是一个 TypeScript 代码示例:

interface User {
  id: number;
  name: string;
  role: 'admin' | 'user';
}

function getUser(id: number): User {
  // 模拟数据库查询
  return {
    id,
    name: "John Doe",
    role: "admin"
  };
}

下面是一个 CSS 代码示例:

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

表格 (Tables)

功能特性免费版专业版企业版
基础生成
高级模型
API 访问
专属支持

任务列表 (Task Lists)

  • 已完成的任务
  • 待处理的任务
  • 正在进行的任务

分割线


以上就是样式指南的全部内容。

扫码联系客服
客服二维码
售后服务
专业售后团队为您服务