Sending code snippets in my react chat application

Question

I'm developing some chat application using React 17+ and I want to add a feature for user to send a code snippet message and make this code look fancy in messages container.

Like this const msg = 'Hello'

I understand that it is accomplishable with just JS and CSS but maybe someone knows some npm package for this?

Thank you in advance!

Answer 1

I would suggest having some kind of syntax that allows code formatting, e.g. if the text is surrounded by three backticks (```). Then, while sending the message, you can implement a formatter that checks the syntax, styles it by e.g. adding a class and styling it with CSS or using something like Prism.js, and finally send the styled message.