add highlight css directly in component and update highlight method from deprecated to current version

Author: LeosPrograms

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}
     `,
   ];
-}
+}

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,