add svelte rendering to markdown renderer (#4663)

* add `svelte` rendering to markdown renderer
resolves #4586
closes #4588

* linting

frontend/src/utils/chat/hljs-libraries/svelte.js

@@ -0,0 +1,48 @@
+export default function hljsDefineSvelte(hljs) {
+  return {
+    subLanguage: "xml",
+    contains: [
+      hljs.COMMENT("<!--", "-->", {
+        relevance: 10,
+      }),
+      {
+        begin: /^(\s*)(<script(\s*context="module")?>)/gm,
+        end: /^(\s*)(<\/script>)/gm,
+        subLanguage: "javascript",
+        excludeBegin: true,
+        excludeEnd: true,
+        contains: [
+          {
+            begin: /^(\s*)(\$:)/gm,
+            end: /(\s*)/gm,
+            className: "keyword",
+          },
+        ],
+      },
+      {
+        begin: /^(\s*)(<style.*>)/gm,
+        end: /^(\s*)(<\/style>)/gm,
+        subLanguage: "css",
+        excludeBegin: true,
+        excludeEnd: true,
+      },
+      {
+        begin: /\{/gm,
+        end: /\}/gm,
+        subLanguage: "javascript",
+        contains: [
+          {
+            begin: /[\{]/,
+            end: /[\}]/,
+            skip: true,
+          },
+          {
+            begin: /([#:\/@])(if|else|each|await|then|catch|debug|html)/gm,
+            className: "keyword",
+            relevance: 10,
+          },
+        ],
+      },
+    ],
+  };
+}

frontend/src/utils/chat/markdown.js

@@ -7,6 +7,10 @@ import "./themes/github-dark.css";
 import "./themes/github.css";
 import { v4 } from "uuid";
 
+// Register custom lanaguages
+import hljsDefineSvelte from "./hljs-libraries/svelte";
+hljs.registerLanguage("svelte", hljsDefineSvelte);
+
 const markdown = markdownIt({
   html: Appearance.get("renderHTML") ?? false,
   typographer: true,