Astro Markdown Component Utility for Any Framework

In the previous article, I spoke about the why and how to use a Markdown component in Astro . Here, we’re going to expand on that and help you use Markdown everywhere — regardless of the framework you use. So, this works for React, Vue, and Svelte. The entire process hinges on the Markdown utility I’ve built for Splendid Labz . Why This Utility? I hit a snag when using most Markdown libraries. I naturally write Markdown content like this: But since most markdown libraries don’t account for whitespace indentation, they create an output with

 and  tags. This is because Markdown treats the indentation beyond four spaces as a code block: 
 
 
 This is a paragraph This is a second paragraph 
 
 
 So you’re forced to strip all indentation and write it like this instead: 
 
   This is a paragraph This is a second paragraph  
 
 That’s hard to read and annoying to maintain. My Markdown utility handles this whitespace issue and generates the correct HTML regardless of how your code is indented: 
 
 
This is a paragraph
 
This is a second paragraph
 
 
 Using This in Your Framework It’s easy. You have to pass the Markdown text into the utility. If inline is true , then markdown will return an output without paragraph tags. Here’s an example with Astro. --- import { markdown } from '@splendidlabz/utils' const { inline = false, content } = Astro.props const slotContent = await Astro.slots.render('default') // Process content const html = markdown(content || slotContent, { inline }) ---  You can then use it like this:    Here’s another example for Svelte. Svelte cannot read dynamic content from slots, so we can only pass it through a prop.