feat: Add Syntax Highlighting to Multiline Code Blocks using react-syntax-highlighter #764
Conversation
|
Hey @abirc8010 |
| const code = useMemo( | ||
| () => lines.map((line) => line.value.value).join('\n'), | ||
| [lines] | ||
| ); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
Can we use some other library, so we don't have to load the styles like this and apply styles manually
There was a problem hiding this comment.
Since main RC uses this library so I thought of using it
There was a problem hiding this comment.
Are they also loading styles this way and manipulating dom element like this?
There was a problem hiding this comment.
They are inserting HTML strings and assigning hljs class names. They are also modifying the styles of hljs classes by overriding the predefined CSS of hljs class names.
There was a problem hiding this comment.
Mmm, Okay...
Still, I am not in favour of this approach, maybe try some different library, where we don't have to load styles and modify dom elements like this.. Let's keep this PR open, we will compare afterwards
abirc8010
changed the title
|
@Spiral-Memory I am using react-syntax-highlighter instead |
|
Great @abirc8010 |
Yes it is the updated one. |
|
Hey @abirc8010
|
|
Hey @Spiral-Memory, I'm not sure why the highlighting looks like this now, but when I recorded the video, it was consistent in color and worked fine. I'll look into it. |
Brief Title
Acceptance Criteria fulfillment
monokaiandvsthemes for dark mode and light mode from react-syntax-highlighter .Fixes #763
Video/Screenshots
Screencast.from.2025-01-01.22-49-52.webm
PR Test Details
Note: The PR will be ready for live testing at https://rocketchat.github.io/EmbeddedChat/pulls/pr-764 after approval. Contributors are requested to replace
<pr_number>with the actual PR number.