Feat: New syntax highlight system based on shiki

[aegroto]

Description

I have implemented a novel code highlight widget based on Shiki, which authors claim to keep the bundle size small. Fixes #1242.

Screenshots

Light mode:

Dark mode:

Additional Context

I am undecided about which themes to adopt. The complete list is provided here.

Checklist

Are your changes backwards compatible? Please answer below: This removes any reference to react-syntax-highligher, replacing it with Shiki. However, I guess no working code depends on this.

On a scale of 1-10 how well and how have you QA'd this change and any features it might affect? Please answer below: 8, I have manually tested with different languages and with no at all on both comments and posts, checking if the preview was updated as well.

For frontend changes: Tested on mobile, light and dark mode? Please answer below: Yes.

Did you introduce any new environment variables? If so, call them out explicitly here: No.

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/[email protected]	None	+43	1.06 MB	kmck, wooorm
npm/[email protected]	None	+35	13 MB	antfu, octref, orta, ...1 more

🚮 Removed packages: npm/[email protected]

View full report↗︎

[socket-security]

🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎

To accept the risk, merge this PR and you will not be notified again.

Alert	Package	Note	Source	CI
Possible typosquat attack	npm/[email protected]	Did you mean: emoji-regex~~-xs~~	package-lock.json package.json	⚠︎

View full report↗︎

Next steps

What is a typosquat?

Package name is similar to other popular packages and may not be the package you want.

Use care when consuming similarly named packages and ensure that you did not intend to consume a different package. Malicious packages often publish using similar names as existing popular packages.

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/[email protected] or ignore all packages with @SocketSecurity ignore-all

• @SocketSecurity ignore npm/[email protected]

[aegroto]

@huumn Thanks for your feedback. I have removed the dependency on directly setting the HTML.

I have also fixed a bug that blocked the adoption of darkMode. However, it looks like the useDarkMode hook is not triggering a re-render until the webpage is refreshed. Could you please check if my usage of the hook is incorrect? Otherwise there may be a bug preventing dark mode updates to be propagated through to the widgets.

[ekzyis]

The missing dark mode update was fixed in #1603

[aegroto]

@ekzyis Thanks for your update, I have merged last changes to the master and I confirm dark mode switch works now! I believe the code is ready for review.