Svelte syntax highlighting

Author: Kris Kratz

frontend/package.json

@@ -19,6 +19,7 @@
     "file-saver": "^2.0.5",
     "he": "^1.2.0",
     "highlight.js": "^11.9.0",
+    "highlightjs-svelte": "^1.0.6",
     "i18next": "^23.11.3",
     "i18next-browser-languagedetector": "^7.2.1",
     "js-levenshtein": "^1.1.6",
@@ -75,4 +76,4 @@
     "tailwindcss": "^3.3.1",
     "vite": "^4.3.0"
   }
-}
+}

frontend/src/pages/GeneralSettings/ChatEmbedWidgets/EmbedChats/MarkdownRenderer.jsx

@@ -1,9 +1,11 @@
 import { useState } from "react";
 import MarkdownIt from "markdown-it";
 import hljs from "highlight.js";
+import hljs_svelte from "highlightjs-svelte";
 import { CaretDown } from "@phosphor-icons/react";
 import "highlight.js/styles/github-dark.css";
 import DOMPurify from "@/utils/chat/purify";
+hljs_svelte(hljs);
 
 const md = new MarkdownIt({
   html: true,

frontend/src/pages/GeneralSettings/ChatEmbedWidgets/EmbedConfigs/EmbedRow/CodeSnippetModal/index.jsx

@@ -2,8 +2,10 @@ import React, { useState } from "react";
 import { CheckCircle, CopySimple, X } from "@phosphor-icons/react";
 import showToast from "@/utils/toast";
 import hljs from "highlight.js";
+import hljs_svelte from "highlightjs-svelte";
 import "@/utils/chat/themes/github-dark.css";
 import "@/utils/chat/themes/github.css";
+hljs_svelte(hljs);
 
 export default function CodeSnippetModal({ embed, closeModal }) {
   return (

frontend/src/pages/GeneralSettings/Chats/MarkdownRenderer.jsx

@@ -1,9 +1,11 @@
 import { useState } from "react";
 import MarkdownIt from "markdown-it";
 import hljs from "highlight.js";
+import hljs_svelte from "highlightjs-svelte";
 import { CaretDown } from "@phosphor-icons/react";
 import "highlight.js/styles/github-dark.css";
 import DOMPurify from "@/utils/chat/purify";
+hljs_svelte(hljs);
 
 const md = new MarkdownIt({
   html: true,

frontend/src/utils/chat/markdown.js

@@ -3,9 +3,11 @@ import markdownIt from "markdown-it";
 import markdownItKatexPlugin from "./plugins/markdown-katex";
 import Appearance from "@/models/appearance";
 import hljs from "highlight.js";
+import hljs_svelte from "highlightjs-svelte";
 import "./themes/github-dark.css";
 import "./themes/github.css";
 import { v4 } from "uuid";
+hljs_svelte(hljs);
 
 const markdown = markdownIt({
   html: Appearance.get("renderHTML") ?? false,