自 自在知识库
首页归档分类标签图谱关于
技术方案

Markdown 富文本渲染能力测试

用于验证文章详情页对代码块、表格、任务列表、流程图、时序图、关系图等 Markdown 扩展格式的渲染能力。

· 5 分钟阅读 ·更新于 2026.06.12

Markdown 富文本渲染能力测试

这篇文章用于验证 zizai.cc 的文章详情页渲染能力，重点覆盖技术文档常见格式：代码块、表格、任务列表、引用块、流程图、时序图、ER 关系图等。

任务列表

  • 支持普通段落、标题、列表
  • 支持代码块语言标识和复制按钮
  • 支持宽表格在移动端内部滚动
  • 支持 Mermaid 流程图、时序图、关系图
  • 后续可扩展 PlantUML / Vega 图表

代码块：C# 设备事件模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public sealed record EquipmentDataCollected(
    string EquipmentId,
    string TagEpc,
    DateTimeOffset Timestamp,
    int? Rssi
);

public interface IDeviceAdapter
{
    Task StartAsync(CancellationToken cancellationToken);
    IAsyncEnumerable<EquipmentDataCollected> ReadEventsAsync(
        CancellationToken cancellationToken
    );
}

代码块：TypeScript 搜索索引

1
2
3
4
5
6
7
8
9
10
11
12
type SearchItem = {
  title: string;
  content: string;
  tags?: string[];
  categories?: string[];
  url: string;
};

export function normalizeText(value: unknown): string {
  if (Array.isArray(value)) return value.join(' ');
  return String(value ?? '').replace(/<[^>]+>/g, ' ').trim();
}

表格：设备接入对比

接入方式 适用场景 优点 风险
串口直连 RFID、天平、温控仪 简单稳定，便于 Docker 后端直接读取 需要处理粘包、CRC、断线重连
CAN-USB 培养振荡器、工业设备 抗干扰强，适合设备总线 需要明确 CAN ID 与帧定义
TCP 网关 多设备集中采集 网络化部署，便于远程维护 网关协议需要统一治理
MQTT 分布式采集和事件推送 解耦、可扩展、天然异步 Topic、QoS、幂等需要规范

引用块

技术文档的重点不是“看起来炫”，而是让协议、边界、流程、异常路径都能被快速理解，并且在手机端也不破版。

流程图：采集事件处理

1
2
3
4
5
6
7
8
flowchart TD
  A[设备原始帧] --> B{CRC 校验}
  B -- 失败 --> E[记录异常帧]
  B -- 通过 --> C[协议解析器]
  C --> D[标准事件模型]
  D --> F[CAP / Webhook 发布]
  D --> G[(时序数据库)]
  F --> H[业务系统订阅]

时序图：读写器上报链路

1
2
3
4
5
6
7
8
9
10
11
12
13
sequenceDiagram
  participant R as RFID Reader
  participant A as Device Adapter
  participant P as Parser
  participant API as Asoka.Core API
  participant DB as QuestDB

  R->>A: 7E55 二进制帧
  A->>P: bytes
  P-->>A: TagReadEvent
  A->>API: POST /equipment/events
  API->>DB: INSERT event
  API-->>A: 202 Accepted

关系图：核心数据模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
erDiagram
  EQUIPMENT ||--o{ EQUIPMENT_EVENT : produces
  TAG ||--o{ EQUIPMENT_EVENT : appears_in
  SAMPLE ||--o{ TAG : binds
  EQUIPMENT {
    string id
    string name
    string protocol
  }
  TAG {
    string epc
    string type
  }
  SAMPLE {
    string sampleNo
    string status
  }
  EQUIPMENT_EVENT {
    string equipmentId
    string tagEpc
    datetime timestamp
    int rssi
  }

状态图：采集服务生命周期

1
2
3
4
5
6
7
8
9
10
stateDiagram-v2
  [*] --> Idle
  Idle --> Connecting: start
  Connecting --> Running: connected
  Connecting --> Retry: failed
  Retry --> Connecting: backoff
  Running --> Degraded: parse error threshold reached
  Degraded --> Running: recovered
  Running --> Stopped: stop
  Stopped --> [*]

总结

如果以上内容在桌面端和移动端都能正常阅读，说明文章详情页已经具备承载技术知识库的基础能力。