search

lobehub / lobe-chat

🤯 Lobe Chat - an open-source, modern-design AI chat framework. Supports Multi AI Providers( OpenAI / Claude 3 / Gemini / Ollama / Azure / DeepSeek), Knowledge Base (file upload / knowledge management / RAG ), Multi-Modals (Vision/TTS) and plugin system. One-click FREE deployment of your private ChatGPT/ Claude application.
https://chat-preview.lobehub.com
Other
39.91k stars 9.08k forks source link

[Bug] 代码块渲染无法正常换行 #143

Closed leeyiding closed 1 year ago

leeyiding commented 1 year ago

💻 系统环境 | Operating System

Windows

🌐 浏览器 | Browser

Chrome

🐛 问题描述 | Bug Description

代码块渲染异常，所有代码都挤到一行了 image

🚦 期望结果 | Expected Behavior

No response

📷 复现步骤 | Recurrence Steps

No response

📝 补充信息 | Additional Information

No response

arvinxx commented 1 year ago

能否将这个内容复制出来？我复现下试试看

leeyiding commented 1 year ago

这个直接在chat.lobehub.com测试的，应该让它随便输出一段代码都能复现

canisminor1990 commented 1 year ago

好像是 Python 的高亮失效了

canisminor1990 commented 1 year ago

@arvinxx https://github.com/lobehub/lobe-ui/blob/master/src/hooks/useHighlight.ts 没加 python 🤔 这块感觉要改成动态引入方案比较好

arvinxx commented 1 year ago

@canisminor1990 怎么做动态引入？识别到某个语法然后自动加载？

arvinxx commented 1 year ago

我建议 python 可以内置掉，其他的再看看？

canisminor1990 commented 1 year ago

@canisminor1990 怎么做动态引入？识别到某个语法然后自动加载？

好像有个动态 es6 方案

const shiki = await getHighlighterCore({
  themes: [
    // instead of strings, you need to pass the imported module
    nord,
    // or a dynamic import if you want to do chunk splitting
    import('shikiji/themes/vitesse-light.mjs')
  ],
  langs: [
    import('shikiji/langs/javascript.mjs'),
    // shikiji will try to interop the module with the default export
    () => import('shikiji/langs/css.mjs'),
    // or a getter that returns custom grammar
    async () => JSON.parse(await fs.readFile('my-grammar.json', 'utf-8'))
  ],
  loadWasm: getWasmInlined
})
canisminor1990 commented 1 year ago

我建议 python 可以内置掉，其他的再看看？

fixed https://github.com/lobehub/lobe-ui/commit/0d6de6e6c657cdf9e084822370914f406f474bee

arvinxx commented 1 year ago

@canisminor1990 怎么做动态引入？识别到某个语法然后自动加载？

好像有个动态 es6 方案

这个动态方案就要是外部传进来不存在的 lang 时，重新初始化 shiki 这样来实现了