Merge pull request #433 from MeetDOD/issue-80

Feat: Added syntax highlight for html and javascript in post page successfully issue 80
VaibhavArora314 · Jul 14, 2024 · 2339622 · 2339622
2 parents 7ca3535 + 7d320b8
commit 2339622
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 17 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -20,6 +20,7 @@
     "dompurify": "^3.1.4",
     "file-saver": "^2.0.5",
     "framer-motion": "^11.2.10",
+    "highlight.js": "^11.10.0",
     "i18next": "^23.11.5",
     "jszip": "^3.10.1",
     "react": "^18.2.0",

diff --git a/frontend/src/components/PostCodeWindow.tsx b/frontend/src/components/PostCodeWindow.tsx
@@ -1,3 +1,7 @@
+import { useEffect } from "react";
+import hljs from "highlight.js";
+import "highlight.js/styles/agate.css"; 
+
 function PostCodeWindow({
   codeSnippet,
   jsCodeSnippet,
@@ -7,46 +11,58 @@ function PostCodeWindow({
   codeSnippet: string;
   jsCodeSnippet: string;
   activeTab: string;
-  handleTabSwitch: (tab: "html" | "js") => void
+  handleTabSwitch: (tab: "html" | "js") => void;
 }) {
+  useEffect(() => {
+    hljs.highlightAll();
+  }, [codeSnippet, jsCodeSnippet, activeTab]);
+
+  useEffect(() => {
+    const highlightedCode = document.querySelectorAll("pre code");
+    highlightedCode.forEach((block) => {
+      block.removeAttribute("data-highlighted");
+      hljs.highlightElement(block as HTMLElement);
+    });
+  }, [activeTab]);
+
   return (
     <>
-      <div className="mb-2 ">
+      <div className="mb-2">
         <div className="flex p-1 border-2 border-sky-500 rounded">
           <button
             onClick={() => handleTabSwitch("html")}
-            className={`px-2 py-1  mx-1 font-semibold rounded-md ${
+            className={`px-2 py-1 mx-1 font-semibold rounded-md ${
               activeTab === "html"
-                ? "bg-sky-500 text-[#ffffff] dark:bg-sky-500 dark:text-white "
+                ? "bg-sky-500 text-[#ffffff] dark:bg-sky-500 dark:text-white"
                 : "border border-sky-500 text-sky-500 dark:text-white"
             }`}
           >
             HTML
           </button>
-          {jsCodeSnippet != "" ? (
+          {jsCodeSnippet !== "" && (
             <button
               onClick={() => handleTabSwitch("js")}
-              className={`px-2 py-1  mx-1 font-semibold rounded-md ${
+              className={`px-2 py-1 mx-1 font-semibold rounded-md ${
                 activeTab === "js"
                   ? "bg-sky-500 text-[#ffffff] dark:bg-sky-500 dark:text-white"
                   : "border border-sky-500 text-sky-500 dark:text-white"
               }`}
             >
               JavaScript
             </button>
-          ) : null}
-        </div>
-        <div className="">
-          {activeTab === "html" ? (
-            <pre className="p-4 text-[#000435] bg-sky-300 dark:text-white dark:bg-[#223bb9] border-4 border-sky-700 rounded overflow-auto max-h-96">
-              <code>{codeSnippet}</code>
-            </pre>
-          ) : (
-            <pre className="p-4 text-[#000435] bg-sky-300 dark:text-white dark:bg-[#223bb9] border-4 border-sky-700 rounded overflow-auto max-h-96">
-              <code>{jsCodeSnippet}</code>
-            </pre>
           )}
         </div>
+        <div className="">
+        {activeTab === "html" ? (
+          <pre className="p-4 text-[#000435] bg-sky-300 dark:text-white dark:bg-gray-800 border-4 border-sky-700 rounded overflow-auto max-h-96">
+            <code className="html rounded-lg">{codeSnippet}</code>
+          </pre>
+        ) : (
+          <pre className="p-4 text-[#000435] bg-sky-300 dark:text-white dark:bg-gray-800 border-4 border-sky-700 rounded overflow-auto max-h-96">
+            <code className="javascript rounded-lg">{jsCodeSnippet}</code>
+          </pre>
+        )}
+      </div>
       </div>
     </>
   );