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 ( + '
' +
+ hljs.highlight(content, { language: lang, ignoreIllegals: true }).value +
+ ""
+ );
+ }
+
+ return (
+ '' + md.utils.escapeHtml(content) + ""
+ );
+ }
})
+ .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;
+ }
}