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}