feat(chat): add/apply marked to support highlighting

project-ait · Oct 26, 2023 · bd0a16b · bd0a16b
1 parent ab4ef6d
commit bd0a16b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "@tiptap/starter-kit": "^2.1.12",
     "@types/cookie": "^0.5.3",
     "autoprefixer": "^10.4.16",
+    "marked": "^9.1.2",
     "postcss": "^8.4.31",
     "postcss-import": "^15.1.0",
     "postcss-nesting": "^12.0.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/components/chat/messages/BaseMessage.svelte b/src/lib/components/chat/messages/BaseMessage.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { marked } from "marked"
+
   export let profilePic: string
   export let bgColor: string
   export let message: string
@@ -14,7 +16,9 @@
     src={profilePic}
     alt={"Profile"}
   />
-  <p class="chat-msg">{message}</p>
+  <div class="chat-msg">
+    {@html marked(message)}
+  </div>
 </div>
 
 <style>
@@ -42,9 +46,10 @@
     object-fit: cover;
   }
 
-  .chat-msg {
+  .chat-msg, .chat-msg :global(p) {
     font-weight: 400;
     line-height: 1.5rem;
     align-self: center;
   }
+
 </style>