Proper html formatting

src/lib/components/AI/AIButton/CustomPromptBtn.svelte

@@ -5,6 +5,7 @@
   import MagicWandFilled from 'carbon-icons-svelte/lib/MagicWandFilled.svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
   import { Loading } from 'carbon-components-svelte';
+  import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
 
   export let className = '';
   export let handleInsert = (v: string) => {};
@@ -66,10 +67,10 @@
           <div class="h-[200px]">
             <div
               bind:this={textRef}
-              class="h-[82%] bg-white dark:text-black p-2 overflow-y-auto text-sm text-start w-full my-1"
+              class="h-[82%] bg-white dark:bg-neutral-700 dark:text-black p-2 overflow-y-auto text-sm text-start w-full my-1"
             >
               {#if isHTML}
-                {@html plainText}
+                <HtmlRender content={plainText} />
               {:else}
                 <p class="font-normal">
                   {plainText}

src/lib/components/Course/index.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { marked } from 'marked';
   import RoleBasedSecurity from '../RoleBasedSecurity/index.svelte';
   import PageNav from '../PageNav/index.svelte';
   import MODES from '$lib/utils/constants/mode';
@@ -8,6 +7,7 @@
   import { course } from './store';
   import { updateCourse } from '$lib/utils/services/courses';
   import TextEditor from '$lib/components/TextEditor/index.svelte';
+  import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
 
   let mode = MODES.view;
   let isDirty = false;
@@ -51,8 +51,6 @@
       height="700"
     />
   {:else}
-    <article class="preview prose prose-sm sm:prose p-2">
-      {@html marked($course.overview || '')}
-    </article>
+    <HtmlRender className="p-2" content={$course.overview || ''} />
   {/if}
 </PageBody>

src/lib/components/CourseLandingPage/index.svelte

@@ -22,6 +22,7 @@
   import Modal from '../Modal/index.svelte';
   import { reviewsModalStore } from './store';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
 
   dayjs.extend(relativeTime);
 
@@ -185,23 +186,24 @@
         <section id="requirement" class="border-b border-gray-300 mt-8 pb-10">
           <h3 class="text-2xl font-bold mt-0 mb-3">Requirement</h3>
           <ul class="list font-light">
-            {@html get(courseData, 'metadata.requirements', '')}
+            <HtmlRender content={get(courseData, 'metadata.requirements', '')} />
           </ul>
         </section>
 
         <!-- Sections - Course Description -->
         <section id="description" class="border-b border-gray-300 mt-8 pb-10">
           <h3 class="text-2xl font-bold mt-0 mb-3">Course Description</h3>
-          <p class="dark:text-white text-sm font-light">
-            {@html get(courseData, 'metadata.description', '')}
-          </p>
+          <HtmlRender
+            className="dark:text-white text-sm font-light"
+            content={get(courseData, 'metadata.description', '')}
+          />
         </section>
 
         <!-- Sections - Goal -->
         <section id="goals" class="mt-8 pb-10">
           <h3 class="text-2xl font-bold mt-0 mb-3">What you'll learn</h3>
           <ul class="list font-light">
-            {@html get(courseData, 'metadata.goals', '')}
+            <HtmlRender content={get(courseData, 'metadata.goals', '')} />
           </ul>
         </section>
 

src/lib/components/HTMLRender/HTMLRender.svelte

@@ -0,0 +1,10 @@
+<script>
+  import { marked } from 'marked';
+
+  export let content = '';
+  export let className = '';
+</script>
+
+<article class="preview prose prose-sm sm:prose {className}">
+  {@html marked(content, { breaks: true, gfm: true })}
+</article>