在我的 React 聊天应用程序中发送代码片段
Sending code snippets in my react chat application
我正在使用 React 17+ 开发一些聊天应用程序,我想添加一个功能供用户发送代码片段消息并使此代码在消息容器中看起来很漂亮。
像这样const msg = 'Hello'
我知道只用 JS 和 CSS 就可以完成,但也许有人知道一些 npm 包吗?
提前致谢!
我推荐你 Prism.js https://prismjs.com/ with https://www.npmjs.com/package/prism-react-renderer 用于 React。
对我来说,它非常适用于博客文章 (Gatsby mdx) 中的代码片段以及聊天消息 (@chatscope/chat-ui-kit-react)。
我建议使用某种允许代码格式化的语法,例如如果文本被三个反引号 (```) 包围。然后,在发送消息时,您可以实现一个格式化程序来检查语法,通过例如添加 class 并使用 CSS 或使用 Prism.js 之类的样式对其进行样式化,最后发送 样式化 消息。
我正在使用 React 17+ 开发一些聊天应用程序,我想添加一个功能供用户发送代码片段消息并使此代码在消息容器中看起来很漂亮。
像这样const msg = 'Hello'
我知道只用 JS 和 CSS 就可以完成,但也许有人知道一些 npm 包吗?
提前致谢!
我推荐你 Prism.js https://prismjs.com/ with https://www.npmjs.com/package/prism-react-renderer 用于 React。
对我来说,它非常适用于博客文章 (Gatsby mdx) 中的代码片段以及聊天消息 (@chatscope/chat-ui-kit-react)。
我建议使用某种允许代码格式化的语法,例如如果文本被三个反引号 (```) 包围。然后,在发送消息时,您可以实现一个格式化程序来检查语法,通过例如添加 class 并使用 CSS 或使用 Prism.js 之类的样式对其进行样式化,最后发送 样式化 消息。