Streamdown 客制化 CodeBlock 演示
interactive
对比不同字体大小的代码块渲染效果，展示自定义组件的实现方案

选择版本:

自定义版本 - 使用 text-sm 字体大小，提升可读性

选择演示内容:

当前展示:
自定义
简短示例

这里是一个简单的工具函数：

typescript

这个函数提供了中文日期格式化功能。

实现原理

原版 Streamdown

preClassName="...text-xs..."

默认使用较小的字体，可能影响代码可读性

自定义版本

preClassName="...text-sm..."

通过 components 参数替换 code 组件，提升字体大小

核心实现步骤:

  1. 基于官方 Streamdown CodeComponent，仅修改字体大小
  2. 将 preClassName 中的 text-xs 改为 text-sm
  3. 使用 React.memo 保持性能优化
  4. 通过 Streamdown 的 components prop 替换默认组件
  5. 保持所有原有功能：语法高亮、复制按钮、下载功能