Using Prismic Slices with Rich Text as Markdown Templates

Create a slice in Prismic with a text block, and then follow this tutorial for further guidance.

1. Install TailwindCss package

   npm install -D @tailwindcss/typography

2. Configure TailwindCss Typography by adding require('@tailwindcss/typography') inside plugins array

   /** @type {import('tailwindcss').Config}*/
   const config = {
       content: ['./src/**/*.{html,js,svelte,ts}'],
   
       theme: {
           extend: {}
       },
   
       // ADD Typography INSIDE PLUGINS ARRARY
       plugins: [require('daisyui'), require('@tailwindcss/typography')]
   };
   
   module.exports = config;

3. Install the SvelteMarkdown package:

   npm i -S svelte-markdown

   Check npmjs for more about svelte-markdown package

4. Import the SvelteMarkdown component in your Svelte file

   import SvelteMarkdown from 'svelte-markdown';

   {#each slice.items as item}
   <div class="m-5">
       <div class="prose w-full  max-w-none  prose-table:bg-gray-800 prose-th:p-5 prose-td:p-5 ">
           <SvelteMarkdown source="{item.code[0].text}" />
       </div>
   </div>
   {/each}