fix: Dynamically import React Syntax Highlighter

[Soxasora]

Description

Fixes #1242
Dynamically imports React Syntax Highlighter and uses the correct theme for the highlight.js based highlighter

Screenshots

Additional Context

This moves a fair bit of react-syntax-highlighter stuff that was present inside the _app bundle and by dynamically importing the highlight.js based highlighter we can highlight stuff again while preventing over 0.7~1.5 MB of base bundle growth, lazy loading it instead.¹

To avoid disrupting the already established Markdown parser, Code dynamically imports libraries when called instead of dynamically importing Code itself

Noting that #1606 seems to have an alternative package that is much smaller than RSH, it shouldn't imports 1.5 MB of highlight.js like RSH do

Checklist

Are your changes backwards compatible? Please answer below:
Yes

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:
7, tested with javascript, java, python

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

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

Bundle Analysis

First load JS
Before

After

New NextJS chunk, loaded when there's a code block (see additional context)

Footnotes

1. this 1.5 MB of growth is not present in the actual code because syntax highlighting isn't enabled ↩

[huumn]

1.5 MB for first load is crazy. It used be to 500kB. I wonder what bloated that.

^ Or is that just for this chunk?

[Soxasora]

Exactly, 1.5MB is the parsed value of the chunk that gets now lazy loaded, it contains all the languages supported by highlight.js and other RSH dependencies.

Before we would have had ~700 kB of RSH sitting in _app (parsed value, not pertaining to first load) and highlight.js too if working, overall I'm glad the first load too benefits from this ^^

I edited the PR, I realized that between edits I messed references up 😅