Add syntax highlighting

biome.json

@@ -43,7 +43,9 @@
       "internal/service/static/**/*.js",
       "internal/service/static/**/*.css",
       "!internal/service/static/js/purify-3.4.11.min.js",
-      "!internal/service/static/js/marked-18.0.5.umd.min.js"
+      "!internal/service/static/js/marked-18.0.5.umd.min.js",
+      "!internal/service/static/js/marked-highlight-2.2.4.umd.min.js",
+      "!internal/service/static/js/highlight-11.11.1.min.js"
     ]
   }
 }

internal/service/static/css/main.css

@@ -1270,10 +1270,13 @@ body {
 }
 
 .message__content pre {
-  background: color-mix(in srgb, var(--color-gray1, #1a1a2e) 100%, white 5%);
+  border: 2px solid var(--color-border-light);
   border-radius: var(--radius, 6px);
-  padding: 0.75em 1em;
+  padding: 0.25em 0.25em;
   margin-block: 0.75em;
+  overflow-x: auto;
+  background: white;
+  color: var(--color-text);
 }
 
 .message__content code {
@@ -1383,3 +1386,103 @@ body {
 .message__content h3 {
   font-size: 1.05em;
 }
+
+/* ==================== */
+/* Syntax Highlighting  */
+/* ==================== */
+
+/* Base16 Tomorrow colors:
+   base00 #ffffff  base01 #e0e0e0  base02 #c5c8c6  base03 #b4b7b4
+   base04 #969896  base05 #373b41  base06 #282a2e  base07 #1d1f21
+   base08 #c82829  base09 #f5871f  base0A #eab700  base0B #718c00
+   base0C #3e999f  base0D #4271ae  base0E #8959a8  base0F #a3685a
+*/
+
+.message__content .hljs-comment,
+.message__content .hljs-quote {
+  color: var(--color-gray4, #969896);
+  font-style: italic;
+}
+
+.message__content .hljs-keyword,
+.message__content .hljs-selector-tag,
+.message__content .hljs-doctag,
+.message__content .hljs-section,
+.message__content .hljs-template-tag {
+  color: var(--color-purple, #8959a8);
+}
+
+.message__content .hljs-built_in,
+.message__content .hljs-literal,
+.message__content .hljs-number,
+.message__content .hljs-regexp,
+.message__content .hljs-link {
+  color: var(--color-cyan, #3e999f);
+}
+
+.message__content .hljs-string,
+.message__content .hljs-subst {
+  color: var(--color-green, #718c00);
+}
+
+.message__content .hljs-title,
+.message__content .hljs-title.function_,
+.message__content .hljs-meta .hljs-keyword,
+.message__content .hljs-tag,
+.message__content .hljs-name {
+  color: var(--color-blue, #4271ae);
+}
+
+.message__content .hljs-type,
+.message__content .hljs-symbol,
+.message__content .hljs-char.escape_,
+.message__content .hljs-bullet,
+.message__content .hljs-selector-id,
+.message__content .hljs-selector-class,
+.message__content .hljs-selector-attr,
+.message__content .hljs-selector-pseudo {
+  color: var(--color-yellow, #eab700);
+}
+
+.message__content .hljs-variable,
+.message__content .hljs-template-variable {
+  color: var(--color-red, #c82829);
+}
+
+.message__content .hljs-variable.language_,
+.message__content .hljs-variable.constant_ {
+  color: var(--color-orange, #f5871f);
+}
+
+.message__content .hljs-attr,
+.message__content .hljs-attribute,
+.message__content .hljs-property,
+.message__content .hljs-attr-name,
+.message__content .hljs-params {
+  color: var(--color-cyan, #3e999f);
+}
+
+.message__content .hljs-meta {
+  color: var(--color-blue, #4271ae);
+}
+
+.message__content .hljs-operator,
+.message__content .hljs-punctuation {
+  color: var(--color-gray4, #969896);
+}
+
+.message__content .hljs-addition {
+  color: var(--color-green, #718c00);
+}
+
+.message__content .hljs-deletion {
+  color: var(--color-red, #c82829);
+}
+
+.message__content .hljs-emphasis {
+  font-style: italic;
+}
+
+.message__content .hljs-strong {
+  font-weight: bold;
+}

internal/service/static/js/marked-highlight-2.2.4.umd.min.js

@@ -0,0 +1,8 @@
+/**
+ * Minified by jsDelivr using Terser v5.39.0.
+ * Original file: /npm/marked-highlight@2.2.4/lib/index.umd.js
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).markedHighlight={})}(this,(function(e){"use strict";function t(e){return(e||"").match(/\S*/)[0]}function n(e){return t=>{"string"==typeof t&&t!==e.text&&(e.escaped=!0,e.text=t)}}const i=/[&<>"']/,o=new RegExp(i.source,"g"),r=/[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/,s=new RegExp(r.source,"g"),g={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},a=e=>g[e];function c(e,t){if(t){if(i.test(e))return e.replace(o,a)}else if(r.test(e))return e.replace(s,a);return e}e.markedHighlight=function(e){if("function"==typeof e&&(e={highlight:e}),!e||"function"!=typeof e.highlight)throw new Error("Must provide highlight function");return"string"!=typeof e.langPrefix&&(e.langPrefix="language-"),"string"!=typeof e.emptyLangClass&&(e.emptyLangClass=""),{async:!!e.async,walkTokens(i){if("code"!==i.type)return;const o=t(i.lang);if(e.async)return Promise.resolve(e.highlight(i.text,o,i.lang||"")).then(n(i));const r=e.highlight(i.text,o,i.lang||"");if(r instanceof Promise)throw new Error("markedHighlight is not set to async but the highlight function is async. Set the async option to true on markedHighlight to await the async highlight function.");n(i)(r)},useNewRenderer:!0,renderer:{code(n,i,o){"object"==typeof n&&(o=n.escaped,i=n.lang,n=n.text);const r=t(i),s=r?e.langPrefix+c(r):e.emptyLangClass,g=s?` class="${s}"`:"";return n=n.replace(/\n$/,""),`<pre><code${g}>${o?n:c(n,!0)}\n</code></pre>`}}}}}));
+//# sourceMappingURL=/sm/281623870b75da1ac109e059f289eca8504d687ecf494bd03265adb3b0db4d7d.map

internal/service/static/js/render.js

@@ -805,3 +805,22 @@ export class Renderer {
     );
   }
 }
+
+// Configure marked to use highlight.js for syntax highlighting.
+// marked v8+ removed the highlight option from setOptions; use the
+// marked-highlight extension instead.
+if (
+  typeof marked !== 'undefined' &&
+  typeof markedHighlight !== 'undefined' &&
+  typeof hljs !== 'undefined'
+) {
+  marked.use(
+    markedHighlight.markedHighlight({
+      langPrefix: 'hljs language-',
+      highlight(code, lang) {
+        const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+        return hljs.highlight(code, { language }).value;
+      },
+    }),
+  );
+}

internal/service/templates/static/head.gohtml

@@ -13,10 +13,18 @@
     <script src="/static/js/marked-18.0.5.umd.min.js"
             integrity="sha384-MU0bL51BF1u980ujv+Pk0Z0qCjhzfBIEHIFPkUq81289nkiAr+q1jSxEkdlIeHLJ"
             crossorigin="anonymous"></script>
+    <!-- marked-highlight: Code block highlighting extension for marked. Source: https://github.com/markedjs/marked-highlight -->
+    <script src="/static/js/marked-highlight-2.2.4.umd.min.js"
+            integrity="sha384-dwtONjF3cowPvkC6KHs+5ITqp94YuQV+1jCZ2KtfyqNQ+PDzf9EwbuPH8tcknWo5"
+            crossorigin="anonymous"></script>
     <!-- DOMPurify: HTML sanitizer. Source: https://github.com/cure53/DOMPurify -->
     <script src="/static/js/purify-3.4.11.min.js"
             integrity="sha384-o44XUELLEnv/iSlA1NWxBweqbD4TSR0qgq2VzVsxtkHS989JJjGKSE9vkfo5MN4K"
             crossorigin="anonymous"></script>
+    <!-- highlight.js: Syntax highlighting. Source: https://github.com/highlightjs/highlight.js -->
+    <script src="/static/js/highlight-11.11.1.min.js"
+            integrity="sha384-dukG6aS9An83eGjW3FyljsaNUAn2XBICcqnV9RvddXccmlmoOvVixb+QdjV3v1XU"
+            crossorigin="anonymous"></script>
     <script type="module" src="/static/js/main.js"></script>
   </head>
 {{ end }}