Merge pull request #1332 from kcoderhtml/syntax-highlighting

feat: syntax highlighting with react-syntax-highlighter

components/arcade/showcase/project-view.js

@@ -98,6 +98,7 @@ const ProjectView = ({
   }, [readMeLink])
 
   return (
+    // export a css property for each of the color and dark color
     <div
       {...props}
       className="gaegu"
@@ -108,6 +109,15 @@ const ProjectView = ({
         minHeight: '100vh'
       }}
     >
+      <style>
+        {`
+      * {
+        --color: ${color};
+        --dark-color: ${darkColor};
+        --text-color: ${textColor};
+      }
+    `}
+      </style>
       <div
         sx={{
           py: 4,

components/arcade/showcase/readme-renderer.module.css

@@ -364,6 +364,8 @@ SOFTWARE.
 
 .reactMarkDown pre div {
 	margin: 0 !important;
+	background-color: var(--color) !important;
+	filter: brightness(105%);
 }
 
 .reactMarkDown code, .reactMarkDown pre tt {