[fix, feature] Support other code languages besides HTML (#708)

Co-authored-by: Ian Seabock (Centific Technologies Inc) <[email protected]>

frontend/src/components/Answer/Answer.tsx

@@ -12,6 +12,8 @@ import { parseAnswer } from "./AnswerParser";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import supersub from 'remark-supersub'
+import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
+import { nord } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { ThumbDislike20Filled, ThumbLike20Filled } from "@fluentui/react-icons";
 import { XSSAllowTags } from "../../constants/xssAllowTags";
 
@@ -178,6 +180,21 @@ export const Answer = ({
         );
     }
 
+    const components = {
+        code({node, ...props}: {node: any, [key: string]: any}) {
+            let language;
+            if (props.className) {
+                const match = props.className.match(/language-(\w+)/);
+                language = match ? match[1] : undefined;
+            }
+            const codeString = node.children[0].value ?? '';
+            return (
+                <SyntaxHighlighter style={nord} language={language} PreTag="div" {...props}>
+                    {codeString}
+                </SyntaxHighlighter>
+            );
+        },
+    };
     return (
         <>
             <Stack className={styles.answerContainer} tabIndex={0}>
@@ -190,6 +207,7 @@ export const Answer = ({
                                 remarkPlugins={[remarkGfm, supersub]}
                                 children={SANITIZE_ANSWER ? DOMPurify.sanitize(parsedAnswer.markdownFormatText, {ALLOWED_TAGS: XSSAllowTags}) : parsedAnswer.markdownFormatText}
                                 className={styles.answerText}
+                                components={components}
                             />
                         </Stack.Item>
                         <Stack.Item className={styles.answerHeader}>