From 33ca81937ad07c0d87a0fd71a3b84e698d4bc0bb Mon Sep 17 00:00:00 2001
From: KW86022 <184099420+KW86022@users.noreply.github.com>
Date: Tue, 22 Oct 2024 15:00:02 +0000
Subject: [PATCH 1/2] github markdown model card details code highlighting

---
 frontend/src/common/MarkdownDisplay.tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/common/MarkdownDisplay.tsx b/frontend/src/common/MarkdownDisplay.tsx
index 9aa237987..db5094baa 100644
--- a/frontend/src/common/MarkdownDisplay.tsx
+++ b/frontend/src/common/MarkdownDisplay.tsx
@@ -6,6 +6,7 @@ import { useTheme } from '@mui/material/styles'
 import Typography from '@mui/material/Typography'
 import ReactMarkdown from 'markdown-to-jsx'
 import { useMemo } from 'react'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 
 export type MarkdownDisplayProps = {
   children: string
@@ -99,6 +100,24 @@ export default function MarkdownDisplay({ children }: MarkdownDisplayProps) {
             />
           ),
         },
+        code: {
+          component: ({ children, ...props }: any) => {
+            const language = props.className ? props.className.replace('lang-', '') : ''
+
+            return (
+              <Box
+                component='code'
+                sx={{
+                  backgroundColor: theme.palette.grey[200],
+                  fontFamily: 'monospace',
+                }}
+                {...props}
+              >
+                {language ? <SyntaxHighlighter language={language}>{children}</SyntaxHighlighter> : children}
+              </Box>
+            )
+          },
+        },
         table: {
           component: (props: any) => (
             <div style={{ overflowX: 'auto' }}>
@@ -108,7 +127,7 @@ export default function MarkdownDisplay({ children }: MarkdownDisplayProps) {
         },
       },
     }),
-    [theme.palette.container.main, theme.palette.markdownBorder.main],
+    [theme.palette.container.main, theme.palette.grey, theme.palette.markdownBorder.main],
   )
 
   return <ReactMarkdown options={options}>{children}</ReactMarkdown>

From 43c3b0fe3433abbed66d368bb3cdd6951864a0dd Mon Sep 17 00:00:00 2001
From: KW86022 <184099420+KW86022@users.noreply.github.com>
Date: Tue, 22 Oct 2024 15:36:05 +0000
Subject: [PATCH 2/2] add dependency

---
 frontend/package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index 9461419e7..eef2708e8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -58,7 +58,8 @@
     "swagger-ui-react": "^5.17.14",
     "swr": "^2.2.5",
     "typescript": "5.5.3",
-    "uuid": "^10.0.0"
+    "uuid": "^10.0.0",
+    "react-syntax-highlighter": "15.5.0"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^14.2.4",