use react syntax highlighter instead of prism

components/previews/CodePreview.tsx

@@ -1,9 +1,12 @@
-import { useEffect, FC } from 'react'
-import Prism from 'prismjs'
+import { FC } from 'react'
 import { useTranslation } from 'next-i18next'
+import useSystemTheme from 'react-use-system-theme'
+
+import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { tomorrowNightEighties, tomorrow } from 'react-syntax-highlighter/dist/cjs/styles/hljs'
 
-import { getExtension } from '../../utils/getFileIcon'
 import useAxiosGet from '../../utils/fetchOnMount'
+import { getLanguageByFileName } from '../../utils/getPreviewType'
 import FourOhFour from '../FourOhFour'
 import Loading from '../Loading'
 import DownloadButtonGroup from '../DownloadBtnGtoup'
@@ -12,14 +15,9 @@ import { DownloadBtnContainer, PreviewContainer } from './Containers'
 const CodePreview: FC<{ file: any }> = ({ file }) => {
   const { response: content, error, validating } = useAxiosGet(file['@microsoft.graph.downloadUrl'])
 
+  const theme = useSystemTheme('dark')
   const { t } = useTranslation()
 
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      Prism.highlightAll()
-    }
-  }, [validating])
-
   if (error) {
     return (
       <PreviewContainer>
@@ -38,9 +36,12 @@ const CodePreview: FC<{ file: any }> = ({ file }) => {
   return (
     <div>
       <PreviewContainer>
-        <pre className={`language-${getExtension(file.name)}`}>
-          <code className="font-mono">{content}</code>
-        </pre>
+        <SyntaxHighlighter
+          language={getLanguageByFileName(file.name)}
+          style={theme === 'dark' ? tomorrowNightEighties : tomorrow}
+        >
+          {content}
+        </SyntaxHighlighter>
       </PreviewContainer>
       <DownloadBtnContainer>
         <DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />