So much stuff. hljs in backend for example

components/Blog/ContentPage.tsx

@@ -1,9 +1,11 @@
 import type { NextPage } from "next";
+import { useEffect } from "react";
 import type { ProjectRender, DiaryRender } from "../../lib/content/types";
 import DiaryPageSelector from "./DiaryPageSelector";
 
 import styles from "../../styles/Blog/Content.module.scss";
 
+
 const ContentPage: NextPage<{ content: ProjectRender | DiaryRender }> = ({ content }) => {
     return (<>
         {content.type === "diary" ? <DiaryPageSelector title={content.title} pageSelected={content.pageSelected} name={content.name} pages={content.entries} /> : null}

lib/content/generateBackend.ts

@@ -4,9 +4,19 @@
 import { Dirent, readdirSync } from "fs";
 import { readFile } from "node:fs/promises";
 import { resolve } from "path";
+import { JSDOM } from "jsdom";
 import type { Project, Diary } from "./types";
 import asciidoctor from "asciidoctor";
 
+// 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);
+
 export const projectEmpty = "<div>Kein Projekt ausgewählt.</div>";
 const projectNotFoundHtml = `<div class="${"error"}">Sorry! There is no data for this project. Please check back later to see if that changed!</div>`;
 const projectServerErrorHtml = `<div class="${"error"}">Sorry! A server error happend when the project data was fetched!</div>`;
@@ -110,4 +120,12 @@ async function generateDiaryHTML(diary: Diary, selectedPage?: number): Promise<s
         console.error(e);
         return projectServerErrorHtml;
     }
+}
+
+export function generateHighlightedDOM(html: string) {
+    const el = new JSDOM(html);
+    el.window.document.querySelectorAll("pre code").forEach((block) => {
+        hljs.highlightElement(block as HTMLElement);
+    });
+    return el.window.document.body.innerHTML;
 }

package.json

@@ -11,6 +11,7 @@
     "asciidoctor": "^2.2.5",
     "color": "^4.2.3",
     "highlight.js": "^11.5.1",
+    "jsdom": "^20.0.1",
     "next": "12.1.0",
     "next-themes": "^0.2.1",
     "node-fetch": "^3.2.0",
@@ -20,6 +21,7 @@
   },
   "devDependencies": {
     "@types/color": "^3.0.3",
+    "@types/jsdom": "^20.0.0",
     "@types/node": "16.11.11",
     "@types/react": "17.0.37",
     "@types/react-dom": "^18.0.5",

pages/blog/diary/[did]/[page].tsx

@@ -1,7 +1,7 @@
 import type { GetServerSideProps, NextPage } from "next";
 import ContentPage from "../../../../components/Blog/ContentPage";
 import Layout from "../../../../components/Blog/Layout";
-import { generateContent, getContentList } from "../../../../lib/content/generateBackend";
+import { generateContent, getContentList, generateHighlightedDOM } from "../../../../lib/content/generateBackend";
 import type { ContentList, Diary, DiaryRender } from "../../../../lib/content/types";
 
 const DiaryMain: NextPage<{ content: DiaryRender }> = ({ content }) => {
@@ -19,12 +19,13 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     if (!contentEntry || !page || typeof page !== "string") return { notFound: true };
 
     const contentHtml = await generateContent(contentEntry, Number.parseInt(page));
+    const contentHighlighted = generateHighlightedDOM(contentHtml);
 
     return {
         props: {
             content: {
                 ...contentEntry,
-                html: contentHtml,
+                html: contentHighlighted,
                 pageSelected: Number.parseInt(page)
             }
         }

styles/Blog/Content.module.scss

@@ -0,0 +1,120 @@
+.asciidoc {
+    font-family: sans-serif;
+
+    :global {
+
+        @import "../asciidocMain";
+
+        h1 {
+            color: var(--repl_color-link, #2ac02a);
+            font-size: 2em;
+        }
+
+        h2 {
+            font-size: 1.5em;
+        }
+        h3 {
+            font-size: 1.2em;
+        }
+        h4 {
+            font-size: 1.1em;
+        }
+
+        h2,
+        h3 {
+            font-weight: bold;
+            text-decoration: underline;
+        }
+
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            color: var(--repl_color, #188a18);
+        }
+
+        #preamble {
+            font-style: italic;
+            font-size: 120%;
+        }
+
+        .paragraph {
+            line-height: 1.3;
+        }
+
+        tbody>tr:nth-of-type(odd),
+        #footer {
+            background-color: #1f2420;
+        }
+
+        tbody>tr:hover {
+            background-color: #364239;
+        }
+
+        pre {
+            background-color: #282c34;
+            border: 1px solid var(--repl_color-hint, #188a18);
+            padding: 1em;
+            color: #abb2bf;
+            clear: right;
+        }
+
+        pre.highlight {
+            padding: 1px;
+        }
+
+        code {
+            background-color: #282c34;
+            color: #abb2bf;
+        }
+
+        /* This _should_ have been included in the Asciidoc style but it isn't */
+        .underline { text-decoration:underline; }
+        .overline { text-decoration:overline; }
+        .line-through { text-decoration:line-through; }
+        :not(pre)>code.nobreak{ word-wrap:normal; }
+        :not(pre)>code.nowrap { white-space:nowrap; }
+        pre.nowrap, pre.nowrap pre { 
+            white-space:pre; 
+            word-wrap:normal; 
+        }
+
+        /* A custom indicator that this code is in fact faulty */
+        .notCompiling code {
+            display: block;
+            position: relative;
+            /*
+            .content {
+                position: absolute;
+            }*/
+
+            &::before {
+                content: "!";
+                color: white;
+                background-color: #a30e0e;
+                border-radius: 50%;
+                position: absolute;
+                top: 1em;
+                right: 1em;
+                display: inline-block;
+                width: 1.3em;
+                height: 1.3em;
+                text-align: center;
+                font-weight: bolder;
+                padding: 1px 1px 1px 1px;
+                font-family: sans-serif;
+                font-size: 1rem;
+            }
+
+            &:hover::after {
+                content: "Code is faulty!";
+                font-weight: bold;
+                color: #a30e0e;
+                position: absolute;
+                right: 1em;
+                bottom: 1em;
+            }
+        }
+    }
+}

styles/Blog/DiaryPageSelector.module.scss

@@ -2,13 +2,13 @@
     float: right;
     background: transparent;
     /* 50px padding in main */
-    margin-right: -50px;
+    margin: -50px -50px 10px 10px;
-    margin-top: -50px;
     padding: 20px;
     border-bottom-left-radius: 1em;
     border-top-right-radius: 1em;
     border: none;
     border-left: 1px solid var(--blog_content-border);
+    border-bottom: 1px solid var(--blog_content-border);
 
     h4 {
         margin: 0 0 10px 0;

styles/Terminal/customAsciidoc.module.scss

@@ -2,7 +2,7 @@
     font-family: sans-serif;
 
     :global {
-        @import "./asciidocBootSlate";
+        @import "../asciidocMain";
         @import "~highlight.js/scss/atom-one-dark";
 
         h1 {

styles/asciidocMain.scss

@@ -0,0 +1,2 @@
+@import "./asciidocBootSlate";
+@import "~highlight.js/scss/atom-one-dark";