Added code highlighter

Author: technoph1le

package-lock.json

@@ -10,14 +10,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.27.0"
+    "react-router-dom": "^6.27.0",
+    "react-syntax-highlighter": "^15.6.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "eslint": "^9.11.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",

package.json

@@ -0,0 +1,26 @@
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+type CodePreviewProps = {
+  language?: string;
+  children: string;
+};
+
+const CodePreview = ({ language, children }: CodePreviewProps) => {
+  if (!language) {
+    language = "markdown"; // for fallback
+  }
+
+  return (
+    <SyntaxHighlighter
+      language={language}
+      style={oneDark}
+      wrapLines={true}
+      customStyle={{ background: "transparent" }}
+    >
+      {children}
+    </SyntaxHighlighter>
+  );
+};
+
+export default CodePreview;

src/components/CodePreview.tsx

@@ -4,19 +4,18 @@ import { CopyIcon, ExpandIcon } from "./Icons";
 import slugify from "../utils/slugify";
 import Button from "./Button";
 
-const SnippetCard = ({ title, language, category }: SnippetCardProps) => {
+const SnippetCard = ({ title, language, category, icon }: SnippetCardProps) => {
   return (
     <li className="snippet">
       <div className="snippet__preview">
         <Button isIcon={true} className="snippet__copy">
           <CopyIcon />
         </Button>
       </div>
+
       <div className="snippet__content">
         <h3 className="snippet__title">{title}</h3>
-        <Link
-          to={`/${slugify(language)}/${slugify(category)}/${slugify(title)}`}
-        >
+        <Link to={`/${language}/${category}/${slugify(title)}`}>
           <ExpandIcon />
         </Link>
       </div>

src/components/SnippetCard.tsx

@@ -5,6 +5,7 @@ import { LanguageData, SnippetType } from "../types";
 import { getSnippetByTitleAndCategory } from "../utils/filters";
 import { CloseIcon } from "./Icons";
 import Button from "./Button";
+import CodePreview from "./CodePreview";
 
 const SnippetModal = () => {
   const modalRoot = document.getElementById("modal-root");
@@ -51,7 +52,7 @@ const SnippetModal = () => {
           </Button>
         </div>
         <div className="code-preview">
-          <pre>{snippet.code}</pre>
+          <CodePreview language={language}>{snippet.code}</CodePreview>
         </div>
         <p>
           <b>Description: </b>

src/components/SnippetModal.tsx

@@ -253,6 +253,14 @@ ol:where([role="list"]) {
   }
 }
 
+.code-preview {
+  border: 1px solid var(--border-color);
+  border-radius: var(--br-md);
+  width: 100%;
+  overflow-x: auto;
+  height: 100%;
+}
+
 /*------------------------------------*\
   #HEADER
 \*------------------------------------*/
@@ -362,11 +370,15 @@ ol:where([role="list"]) {
 
 .snippet__preview {
   width: 100%;
+  overflow: hidden;
   aspect-ratio: 16 / 9;
   background-image: var(--gradient-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--br-md);
   position: relative;
+  padding-inline: 1em;
+  display: grid;
+  place-items: center;
 }
 
 .snippet__copy {
@@ -407,8 +419,8 @@ ol:where([role="list"]) {
 .modal {
   background-color: var(--bg-secondary);
   padding: 2rem;
-  width: 80%;
-  max-width: 600px;
+  width: 90%;
+  max-width: 800px;
   border-radius: var(--br-lg);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   position: relative;
@@ -422,12 +434,6 @@ ol:where([role="list"]) {
   gap: 1rem;
 }
 
-.code-preview {
-  background-color: var(--bg-primary);
-  padding: 0.5em 1em;
-  border-radius: var(--br-md);
-}
-
 .modal__tags {
   display: flex;
   gap: 1em;