Astro Markdown Part Utility for Any Framework

Within the earlier article, I spoke concerning the why and methods to use a Markdown part in Astro.

Right here, we’re going to broaden on that and allow you to use Markdown in every single place — whatever the framework you employ. So, this works for React, Vue, and Svelte.

The whole course of hinges on the Markdown utility I’ve constructed for Splendid Labz.

Why This Utility?

I hit a snag when utilizing most Markdown libraries. I naturally write Markdown content material like this:

  

    
    
      This can be a paragraph

      This can be a second paragraph
    
  

However since most markdown libraries don’t account for whitespace indentation, they create an output with

 and  tags.




It’s because Markdown treats the indentation past 4 areas as a code block:




  

    
  This can be a paragraph

      This can be a second paragraph
    



So that you’re pressured to strip all indentation and write it like this as a substitute:

  

    
    
  This can be a paragraph

  This can be a second paragraph
    
  

That’s laborious to learn and annoying to take care of.
My Markdown utility handles this whitespace challenge and generates the right HTML no matter how your code is indented:

  

    
This can be a paragraph
    
This can be a second paragraph
  

Utilizing This in Your Framework
It’s simple. It’s important to cross the Markdown textual content into the utility. If inline is true, then markdown will return an output with out paragraph tags.
Right here’s an instance with Astro.
---
import { markdown } from '@splendidlabz/utils'
const { inline = false, content material } = Astro.props
const slotContent = await Astro.slots.render('default')

// Course of content material
const html = markdown(content material || slotContent, { inline })
---


You may then use it like this:

   

Right here’s one other instance for Svelte.
Svelte can not learn dynamic content material from slots, so we will solely cross it by a prop.



{@html html}
And you should utilize it like this:

It’s moderately easy to construct the identical for React and Vue so I’d go away that as much as you.
Taking it Additional
I’ve been constructing for the online — lengthy sufficient to expertise the frustration of doing the identical issues again and again.
So I consolidated all the things I exploit into a number of easy libraries — like Splendid Utils, and some others for layouts, Astro and Svelte parts.
I write about all of them on my weblog. Come by in the event you’re taken with higher DX as you construct your websites and apps!