fix(vite): make syntax highlighter work consistently

See: react-syntax-highlighter/react-syntax-highlighter#513

src/index.tsx

@@ -5,6 +5,8 @@ import 'typeface-roboto'
 import './index.sass'
 
 import { ThemeProvider, createTheme } from '@mui/material/styles'
+import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { materialDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
 
 import Init from './Init'
 import reportWebVitals from './reportWebVitals'
@@ -14,6 +16,15 @@ import reportWebVitals from './reportWebVitals'
 // See: https://stackoverflow.com/a/76017295/470685
 ;<ThemeProvider theme={createTheme()} />
 
+// NOTE: This is a workaround for SyntaxHighlighter not working reliably in the
+// EmbedCodeDialog component. It seems to have the effect of warming some
+// sort of internal cache that avoids a race condition within
+// SyntaxHighlighter.
+// See: https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/513
+ReactDOM.createRoot(document.createElement('div')).render(
+  <SyntaxHighlighter language="" style={materialDark} children={''} />
+)
+
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(<Init />)