[Feature] - Use PrismLight syntax highlighting instead of Prism to improve performance and reduce build size

[barrymun]

What feature would you like to see?

Import PrismLight instead of Prism when using the react-syntax-highlighter lib. Suggested here.

This should improve performance and reduce the build size.

It is important to ensure that all functionality remains the same.

[barrymun]

WIP

[barrymun]

@dostonnabotov Whilst working in this area I noticed that we don't allow the user to change the style of the syntax highlighter itself. We have the code style={theme === "dark" ? oneDark : oneLight} which toggles between light and dark for the "one" style depending on the theme.

I was wondering if adding the ability to select the style of the highlighter theme was something we wish to add?

Here is how I would envisage such a feature:

1. A new selector somewhere on the page (placed at the top for the purposes of this demo)
   

2. The dropdown options (taken from react-syntax-highlighter/dist/esm/styles/prism):
   

3. Difference snippet styles:
   
   
   
   

Please let me know if you think this is something worth pursuing, thanks.

[technoph1le]

Hey, @barrymun. Thank you for taking the time to contribute to our project.

I briefly talked about not adding code preview theme toggle to keep the simplicity in this issue #66.

However, if community wants to see this feature being included, why not? Perhaps instead of highlighting just the code, we can update the theme of the whole website to match the code theme.

I love to hear others' thoughts on this as well.

[barrymun]

@dostonnabotov Thanks for linking that issue. I've created a draft PR (which builds on #73 ) if you want to try out a sample version of what this could look like in its basic form. The suggestion whereby we update not only the style of the code but also the entire app could be a good one. Here is the related PR: #97.

[barrymun]

PrismLight is not suitable as a number of languages (like c, c++, etc.) are only supported by the full library. Closing.