Syntax highlighting in modal

components/ProjectModal.tsx

@@ -1,11 +1,20 @@
 import type { NextPage } from "next";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import styles from "../styles/ProjectModal.module.css";
 import type { Project, Diary } from "../lib/content/types";
 import { useCommands } from "./contexts/CommandInterface";
 import { generateContent, projectEmpty } from "../lib/content/generate";
 import { useModalFunctions } from "./contexts/ModalFunctions";
 
+// Code Highlighting
+import hljs from "highlight.js";
+import rust from "highlight.js/lib/languages/rust";
+import bash from "highlight.js/lib/languages/shell";
+hljs.registerLanguage("rust", rust);
+hljs.registerLanguage("bash", bash);
+hljs.registerLanguage("console", bash);
+hljs.registerLanguage("shell", bash);
+
 const ProjectModal: NextPage = () => {
     const [visible, setVisible] = useState<boolean>(false);
     const [currentContent, setCurrentContent] = useState<Project | Diary | undefined>(undefined);
@@ -23,6 +32,10 @@ const ProjectModal: NextPage = () => {
     updateCmdCallbacks({ setModalVisible: setVisible, setModalContent, setModalHTML: setHTMLContent });
     updateModalCallbacks({ setVisible, setContent: setModalContent, setHtml: setHTMLContent });
 
+    useEffect(() => {
+        hljs.highlightAll();
+    }, [HTMLContent]);
+
     const containerRef = useRef<HTMLDivElement>(null);
 
     if (!visible) return <></>;

package-lock.json

@@ -8,6 +8,7 @@
       "dependencies": {
         "asciidoctor": "^2.2.5",
         "color": "^4.2.3",
+        "highlight.js": "^11.5.1",
         "next": "12.1.0",
         "node-fetch": "^3.2.0",
         "phosphor-react": "^1.3.1",
@@ -2001,6 +2002,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.5.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.5.1.tgz",
+      "integrity": "sha512-LKzHqnxr4CrD2YsNoIf/o5nJ09j4yi/GcH5BnYz9UnVpZdS4ucMgvP61TDty5xJcFGRjnH4DpujkS9bHT3hq0Q==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
@@ -5022,6 +5031,11 @@
         "has-symbols": "^1.0.2"
       }
     },
+    "highlight.js": {
+      "version": "11.5.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.5.1.tgz",
+      "integrity": "sha512-LKzHqnxr4CrD2YsNoIf/o5nJ09j4yi/GcH5BnYz9UnVpZdS4ucMgvP61TDty5xJcFGRjnH4DpujkS9bHT3hq0Q=="
+    },
     "ignore": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "asciidoctor": "^2.2.5",
     "color": "^4.2.3",
+    "highlight.js": "^11.5.1",
     "next": "12.1.0",
     "node-fetch": "^3.2.0",
     "phosphor-react": "^1.3.1",

styles/customAsciidoc.scss

@@ -2,6 +2,7 @@
     font-family: sans-serif;
 
     @import "./asciidocBootSlate";
+    @import "~highlight.js/styles/github";
 
     h1 {
         color: var(--repl-color-link, #2ac02a);