[Code-Area] code blocks with highlighted languages

[VeejaLiu]

Can we use code blocks that recognize highlighted languages like in Coze? I checked the documentation but couldn't find any related tags.

Do we have plans for this? Or is there an easy way to implement it now?

[DaiQiangReal]

This first demo?

What you want?

[VeejaLiu]

Oh, I haven’t looked at the documentation under Chat.
But I want to know how to create a code box like this that includes syntax highlighting, language type indication, and a copy button.
I don’t want a chat box, but I would like a code box like this. Can this be achieved using the CodeHighlight component? Or is there an easier way to achieve the same effect? It seems that using CodeHighlight requires additional setup similar to Prism.js, which looks a bit complicated.
But the demo, It seems only used simple Markdown to achieve.

[DaiQiangReal]

Add language indicator and copy button function yourself by wrapping CodeHighlight component with your own div and css. Highlight different code language by importing extra prismJS language plugin following https://semi.design/en-US/plus/codehighlight#Support%20other%20languages

[VeejaLiu]

Okay...
Thank you for your reply. Although this is different from what I expected, I don’t understand why the chat box component can achieve this effect so simply. But still, thank you for your response.