makecindy / makecindy/cindy

[Feature] 移动端代码块支持语法高亮

Open
#798 0 comments 0 reactions 0 assignees View on GitHub
feature
Dominant language
TypeScript
Stars
2.7k
Forks
401
Avg merge
21h 48m
Merged PRs (30d)
776

Description

## 使用场景 / Use case

用户在 iOS 或 Android 客户端阅读包含 TypeScript 等围栏代码块的 Agent 回复时,需要通过关键字、类型、字符串等语法着色快速理解代码结构,尤其是长回复中的大段示例代码。

## 当前问题 / Current limitation

移动端代码块目前只显示为单色等宽文本,没有语法高亮;同一类回复在 macOS Desktop 可以正常高亮。

源码分析确认:

- Mobile Markdown 解析器能够识别并保留 `ts` 等围栏语言标记。
- 聊天消息的代码块渲染器只渲染 `block.text`,没有消费 `block.language`,也没有执行语法解析或 token 着色。
- iOS 和 Android 共用该渲染路径,因此两端行为一致。
- “长回复”不是必要触发条件,只是在长代码块下更明显。
- Windows Desktop 与 macOS 共用高亮实现,源码上具备支持,但尚未实机验证。

分析基于 commit `8aedb3a7`。相关 Mobile Markdown 测试只覆盖语言标记解析和代码文本输出,没有覆盖最终语法着色。

## 期望方案 / Proposed solution

在移动端代码块渲染链路中消费围栏语言标记,为 `ts` / `typescript` 及常用语言提供语法高亮,并保持现有横向滚动和文本选择能力。

实现时应同时适配 Light 与 Dark 模式。若需要新增 `apps/mobile/package.json` 依赖,应先评估 runtime fingerprint 与冷更影响,优先采用不改变指纹的实现方案。

## 验收标准

- iOS 和 Android 能根据 `ts` / `typescript` 等语言标记渲染语法高亮。
- 短代码块和长回复中的代码块行为一致。
- Light 和 Dark 模式均使用可读的语义颜色。
- 保持代码块横向滚动和文本选择能力。
- 增加覆盖“语言解析结果进入最终着色渲染”的测试。
- Windows Desktop 补充实机验证,且 Desktop 现有高亮无回归。

## 已考虑的替代方案 / Alternatives considered

继续使用单色代码文本只能保证基本可读性,无法解决移动端与 Desktop 的体验差异。

## 环境 / Environment

- Cindy 版本:用户设备版本未知;源码分析基于 `8aedb3a7`
- iOS:用户反馈存在,系统版本未知
- Android:用户反馈存在,系统版本未知
- macOS:用户已确认支持
- Windows:未验证
- 安装方式:未知

## 截图 / Screenshots

移动端单色代码块:

![移动端代码块未显示语法高亮](https://github.com/user-attachments/assets/47641c41-6753-4d65-9bdc-916774a326a3)

macOS 语法高亮对照:

![macOS 代码块语法高亮对照](https://github.com/user-attachments/assets/72755720-051f-4886-8ce0-137cd87d8401)

Contributor guide

Open the contributing guide

Research direction

Start at the mobile chat code-block renderer, where the issue says only block.text is currently consumed, and review the related Mobile Markdown tests plus apps/mobile/package.json. Trace how block.language is produced and reaches rendering, then verify that language-marked blocks receive readable Light and Dark syntax colors while preserving horizontal scrolling and text selection. Done includes iOS and Android coverage, the end-to-end highlighting test, and Windows Desktop validation without regression.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
frontend, mobile
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.