Switch to svelte-markdown

src/lib/Chat.svelte

@@ -4,8 +4,8 @@
   import { apiKeyStorage, chatsStorage, addMessage, clearMessages } from "./Storage.svelte";
   import type { Response, Message } from "./Types.svelte";
 
-  import { marked } from "marked";
   import { afterUpdate, onMount } from "svelte";
+  import SvelteMarkdown from "svelte-markdown";
 
   export let chatId: number;
   let updating: boolean = false;
@@ -24,10 +24,11 @@
     input.focus();
   });
 
-  marked.setOptions({
+  // Marked options
+  const markedownOptions = {
     gfm: true,
     breaks: true,
-  });
+  };
 
   const send = async () => {
     // Compose the input message
@@ -159,17 +160,35 @@
         >
           ✏️
         </a>
-        {@html marked(message.content)}
+        <SvelteMarkdown
+          source={message.content}
+          options={markedownOptions}
+          renderers={{
+            /*code: Code*/
+          }}
+        />
       </div>
     </article>
   {:else if message.role === "system"}
     <article class="message is-danger">
-      <div class="message-body">{@html marked(message.content)}</div>
+      <SvelteMarkdown
+        source={message.content}
+        options={markedownOptions}
+        renderers={{
+          /*code: Code*/
+        }}
+      />
     </article>
   {:else}
     <article class="message is-success">
       <div class="message-body">
-        {@html marked(message.content)}
+        <SvelteMarkdown
+          source={message.content}
+          options={markedownOptions}
+          renderers={{
+            /*code: Code*/
+          }}
+        />
         {#if message.usage}
           <p class="is-size-7">
             This message was generated using <span class="has-text-weight-bold">{message.usage.total_tokens}</span>

src/lib/Code.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  // Disabled for now - it blows up the size too much
+  import { HighlightAuto } from "svelte-highlight";
+  import style from "svelte-highlight/styles/edge-light";
+
+  export let type: "code";
+  export let raw: string;
+  export let codeBlockStyle: "indented" | undefined = undefined;
+  export let lang: string | undefined = undefined;
+  export let text: string;
+
+  // Disable warnings
+  type = "code";
+  raw;
+  codeBlockStyle;
+  lang;
+</script>
+
+<svelte:head>
+  {@html style}
+</svelte:head>
+
+<HighlightAuto code={text} />