[Bug] 代码块显示错位问题

[hedeqiang]

📦 部署环境

Official Preview

📌 软件版本

v1.36.44

💻 系统环境

macOS

🌐 浏览器

Chrome

🐛 问题描述

当代码块包含特殊字符会导致 ，输出样式错位的问题

📷 复现步骤

No response

🚦 期望结果

No response

📝 补充信息

No response

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

📦 Deployment environment

Official Preview

📌 Software version

v1.36.44

💻 System environment

macOS

🌐 Browser

Chrome

🐛 Problem description

When the code block contains special characters, it will cause output style misalignment.

📷 Steps to reproduce

No response

🚦 Expected results

No response

📝 Supplementary information

No response

[lobehubbot]

👀 @hedeqiang

Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible.
Please make sure you have given us as much context as possible.
非常感谢您提交 issue。我们会尽快调查此事，并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

[dosubot]

@hedeqiang 你好！我是 Dosu，一个可以帮助你解决问题、回答疑问并成为贡献者的机器人。在等待人类维护者的过程中，我会尽力帮助你解决问题。

The issue you're experiencing with code block misalignment when special characters are present might be related to how the CodeBlock component handles rendering. The CodeBlock component in the lobe-chat application uses the useCode function to process code content and determine the appropriate rendering method, either as a single line or multi-line block, using PreSingleLine or Pre components from @lobehub/ui/mdx ^[1].

If the misalignment is specifically due to special characters, it might be worth checking if there are any encoding or rendering configurations in the Highlighter component from @lobehub/ui, as it is responsible for syntax highlighting ^[2][3].

To address this issue, you might want to:

1. Verify if the useCode function or the Highlighter component has any settings or options that could affect the handling of special characters.
2. Check if there are any CSS styles applied to the CodeBlock component that might be causing the misalignment.
3. Consider testing with different browsers or environments to see if the issue persists, as it might be browser-specific.

If these steps do not resolve the issue, reviewing the specific implementation details of the CodeBlock and Highlighter components might provide further insights.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[sxjeru]

最好能把原输出内容复制一份发上来，可能是模型没有严格按markdown格式输出的缘故。

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

It is best to copy and send a copy of the original output content. It may be because the model is not output strictly in markdown format.