Markdown in notes

package.json

@@ -46,6 +46,7 @@
         "@sveltejs/adapter-static": "1.0.0-next.13",
         "date-fns": "2.23.0",
         "js-search": "2.0.0",
+        "marked": "^11.1.1",
         "redis": "3.1.2"
     }
 }

src/lib/components/script-notes/leaf-inner.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { marked } from 'marked'
     export let text: string
     $: parts = text.split('  \n')
 </script>
@@ -7,5 +8,5 @@
     {#if index !== 0}
         <br />
     {/if}
-    {part}
+    {@html marked.parseInline(part)}
 {/each}

src/lib/components/script-notes/script-notes.svelte

@@ -6,7 +6,12 @@
 
     type Block =
         | {
-              type: 'p' | 'code'
+              type: 'p'
+              content: string
+              style: string
+          }
+        | {
+              type: 'code'
               content: string
           }
         | {
@@ -17,6 +22,7 @@
     type Content = Block[]
 
     let content: Content = []
+
     $: {
         const lines = notes.split('\n\n')
         content = lines.map((line) => {
@@ -42,9 +48,15 @@
                     }),
                 }
             } else {
+                let classString = ''
+                if (line.startsWith('###')) classString = 'text-lg font-bold'
+                else if (line.startsWith('##')) classString = 'text-xl font-bold'
+                else if (line.startsWith('#')) classString = 'text-2xl font-bold'
+
                 return {
                     type: 'p',
-                    content: line,
+                    content: line.replace(/#+\s*/, ''),
+                    style: classString,
                 }
             }
         })
@@ -54,7 +66,7 @@
 <div class="my-3 flex flex-col space-y-2">
     {#each content as block}
         {#if block.type == 'p'}
-            <p>
+            <p class="{block.style}">
                 <Leaf text="{block.content}" />
             </p>
         {:else if block.type == 'ul'}