From 4976425659eb972388cfc19cf03d6e74b1f85bd9 Mon Sep 17 00:00:00 2001
From: Leo <leobensman@gmail.com>
Date: Fri, 3 Oct 2025 21:34:40 +0200
Subject: [PATCH] add highlight css directly in component and update highlight
 method from deprecated to current version

---
 ui/src/elements/markdown-note.ts |  5 ++++-
 ui/src/utils.ts                  | 11 +++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/ui/src/elements/markdown-note.ts b/ui/src/elements/markdown-note.ts
index 93cbdef..00a368c 100644
--- a/ui/src/elements/markdown-note.ts
+++ b/ui/src/elements/markdown-note.ts
@@ -511,6 +511,9 @@ export class MarkdownNote extends LitElement {
       .tooltip::part(popup) {
         z-index: 10;
       }
+
+      /* loaded from https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs.min.css */
+      pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#fff;color:#000}.hljs-comment,.hljs-quote,.hljs-variable{color:green}.hljs-built_in,.hljs-keyword,.hljs-name,.hljs-selector-tag,.hljs-tag{color:#00f}.hljs-addition,.hljs-attribute,.hljs-literal,.hljs-section,.hljs-string,.hljs-template-tag,.hljs-template-variable,.hljs-title,.hljs-type{color:#a31515}.hljs-deletion,.hljs-meta,.hljs-selector-attr,.hljs-selector-pseudo{color:#2b91af}.hljs-doctag{color:grey}.hljs-attr{color:red}.hljs-bullet,.hljs-link,.hljs-symbol{color:#00b0e8}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
     `,
   ];
-}
+}
\ No newline at end of file
diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index 2c1b5cf..fa8932c 100644
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -81,9 +81,16 @@ Marked.setOptions
   renderer: new HilightRenderer,
   highlight: (code, lang) =>  {
     if (lang) {
-      return hljs.highlight(lang, code).value
+      try {
+        const highlightResult = hljs.highlight(code, { language: lang });
+        return highlightResult.value;
+      } catch (error) {
+        const autoResult = hljs.highlightAuto(code);
+        return autoResult.value;
+      }
     }
-    return code
+    const autoResult = hljs.highlightAuto(code);
+    return autoResult.value;
   },
   gfm: true,
   tables: true,