From 63ca617895fd75eb147f360dd7469d3a111a7a07 Mon Sep 17 00:00:00 2001
From: deadvey <deadvey@deadvey.com>
Date: Mon, 1 Jun 2026 15:20:30 +0100
Subject: [PATCH] syntax highlighting

---
 package.json        |  2 ++
 src/functions.js    | 16 ++++++++++++++++
 webroot/default.css |  8 ++++++--
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 687685e..1207410 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,9 @@
     "ejs": "^3.1.10",
     "express": "^5.2.1",
     "express-router": "^0.0.1",
+    "highlight.js": "^11.11.1",
     "markdown-it": "^14.1.0",
+    "markdown-it-named-code-blocks": "^1.1.0",
     "mssql": "^12.2.0",
     "package.json": "^2.0.1"
   }
diff --git a/src/functions.js b/src/functions.js
index e4c0268..3bb2ea2 100644
--- a/src/functions.js
+++ b/src/functions.js
@@ -127,6 +127,8 @@ export function render_comment(comment_content)
 export function render_md(content)
 {
 	const markdownit = require("markdown-it")
+	const hljs = require("highlight.js");
+	const namedCodeBlocks = require("markdown-it-named-code-blocks");
 	const md = markdownit
 	({ // this is just defining some options for markdown-it, should I add this to config.json?
 		html: false,
@@ -135,7 +137,21 @@ export function render_md(content)
 		linkify: false,
 		typographer: true,
 		quotes: locale.quotes,
+		highlight: function (content, lang) {
+			if (lang && hljs.getLanguage(lang)) {
+				return (
+					'<pre class="hljs"><code>' +
+					hljs.highlight(content, { language: lang, ignoreIllegals: true }).value +
+					"</code></pre>"
+				);
+			}
+
+			return (
+				'<pre class="hljs"><code>' + md.utils.escapeHtml(content) + "</code></pre>"
+			);
+		}
 	})
+	.use(namedCodeBlocks)
 	.disable('image');
 	return md.render(content)
 };
diff --git a/webroot/default.css b/webroot/default.css
index e9e6a16..951b25e 100644
--- a/webroot/default.css
+++ b/webroot/default.css
@@ -30,7 +30,6 @@ a {
 	  border: none;
 	  border-radius: 0px;
 	  font-size: 14px;
-   }
 }
 a:hover {
 	text-decoration: underline;
@@ -56,7 +55,9 @@ a:hover {
 	.comment:nth-child(even) {
 		background: #1E1E1E;
 	}
-
+	.named-fence-filename {
+		border: 1px white solid; 
+	}
 }
 
 @media (prefers-color-scheme: light) {
@@ -70,4 +71,7 @@ a:hover {
 	.comment:nth-child(even) {
 		background: #EEEEEE;
 	}
+	.named-fence-filename {
+		border: 1px black solid; 
+	}
 }