fix(CodeBlock): Add new syntax highlighter #682
Conversation
|
Preview: https://chatbot-pr-chatbot-682.surge.sh A11y report: https://chatbot-pr-chatbot-682-a11y.surge.sh |
rebeccaalpert
requested review from
kaylachumley,
nicolethoen and
thatblindgeye
thatblindgeye
left a comment
thatblindgeye
left a comment
There was a problem hiding this comment.
I think this looks good. One question: I know we have the codeblock in chatbot set to remain in dark mode regardless of the app level mode, and at least from the "code" message in an example the contrast looks great.
For a light mode code block, though, the contrast does seem to fail (not sure if I'm just not enabling a light mode code block correctly, though). Anyways the question: do we know if consumers are using a light mode code block/editor for these messages/are easily able to do so? If either is the case, we should do a quick check of these syntax highlights in light mode as a followup at some point.
I don't know of any, and they'd have to manually go in and write custom CSS if they wanted to. We don't make it easy for them. |
|
@rebeccaalpert Gotcha thank you! In that case I'm good without any sort of followup. |
We had previously dropped react-syntax-highlighter due to a vulnerability. It has been several months and they have yet to fix it, though are making progress. Rehype-highlight is maintained by unified, which maintains the Markdown processor, and seems better maintained. We can swap out the highlighting style to any of these options very easily if needed as well: https://highlightjs.org/examples
rebeccaalpert
force-pushed
the
highlighting
branch
from
310e138 to
a1c9c51
Compare
|
🎉 This PR is included in version 6.5.0-prerelease.3 🎉 The release is available on: Your semantic-release bot 📦🚀 |
We had previously dropped react-syntax-highlighter due to a vulnerability. It has been several months and they have yet to fix it, though are making progress. Rehype-highlight is maintained by unified, which maintains the Markdown processor, and seems better maintained. We can swap out the highlighting style to any of these options very easily if needed as well: https://highlightjs.org/examples
6 participants
We had previously dropped code highlighting dependency react-syntax-highlighter due to a vulnerability. It has been several months and they have yet to fix it, though are making progress. Rehype-highlight is a rehype plugin. We already use a few of these. It is maintained by unified, which maintains our Markdown processor, and seems well maintained. We can swap out the highlighting style to any of these options very easily if needed as well: https://highlightjs.org/examples. I went with a dark vs theme since that's what we use elsewhere in PF, but let me know if you want something else.
Demo: https://chatbot-pr-chatbot-682.surge.sh/patternfly-ai/chatbot/messages#bot-messages