chore: Add react-syntax-highlight back (#5369)

site/package.json

@@ -64,6 +64,7 @@
     "react-i18next": "12.0.0",
     "react-markdown": "8.0.3",
     "react-router-dom": "6.4.1",
+    "react-syntax-highlighter": "15.5.0",
     "remark-gfm": "3.0.1",
     "sourcemapped-stacktrace": "1.1.11",
     "tzdata": "1.0.30",
@@ -93,6 +94,7 @@
     "@types/react": "18.0.15",
     "@types/react-dom": "18.0.6",
     "@types/react-helmet": "6.1.5",
+    "@types/react-syntax-highlighter": "15.5.5",
     "@types/semver": "7.3.12",
     "@types/superagent": "4.1.15",
     "@types/ua-parser-js": "0.7.36",

site/src/components/Markdown/Markdown.tsx

@@ -11,7 +11,7 @@ import ReactMarkdown from "react-markdown"
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
 import gfm from "remark-gfm"
 import { colors } from "theme/colors"
-import darcula from "react-syntax-highlighter/dist/cjs/styles/prism/darcula"
+import { darcula } from "react-syntax-highlighter/dist/cjs/styles/prism"
 
 export interface MarkdownProps {
   children: string
@@ -41,13 +41,14 @@ export const Markdown: FC<{ children: string }> = ({ children }) => {
           return <pre>{children}</pre>
         },
 
-        code: ({ node, inline, className, children, ...props }) => {
+        code: ({ node, inline, className, children, style, ...props }) => {
           const match = /language-(\w+)/.exec(className || "")
 
           return !inline && match ? (
             <SyntaxHighlighter
               style={darcula}
-              language={match[1]}
+              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- this can be undefined
+              language={match[1] ?? "language-shell"}
               useInlineStyles={false}
               // Use inline styles does not work correctly
               // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/329

site/yarn.lock

@@ -3214,6 +3214,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-syntax-highlighter@15.5.5":
+  version "15.5.5"
+  resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.5.tgz#4d3b51f8956195f1f63360ff03f8822c5d74c516"
+  integrity sha512-QH3JZQXa2usAvJvSsdSUJ4Yu4j8ReuZpgRrEW+XP+Rmosbn425YshW9iGEb/pAARm8496axHhHUPRH3UmTiB6A==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@^4.2.0":
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
@@ -11752,7 +11759,7 @@ react-router@6.4.1:
   dependencies:
     "@remix-run/router" "1.0.1"
 
-react-syntax-highlighter@^15.4.5:
+react-syntax-highlighter@15.5.0, react-syntax-highlighter@^15.4.5:
   version "15.5.0"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz#4b3eccc2325fa2ec8eff1e2d6c18fa4a9e07ab20"
   integrity sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==