Using Prismic Slices with Rich Text as Markdown Templates

Converting Prismic Slices Rich Text to Markdown (MD) Templates

markdown
md
sveltekit
prismic

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}