syntax highlighting

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"
   }

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)
 };

webroot/default.css

@@ -31,7 +31,6 @@ a {
 	  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; 
+	}
 }