Astro Markdown Part Utility for Any Framework

Within the earlier article, I spoke in regards to the why and use a Markdown element in Astro.

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

Your entire 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:

  

    
    
      It is a paragraph

      It is a second paragraph
    
  

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

 and  tags.




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




  

    
  It is a paragraph

      It is a second paragraph
    



So that you’re compelled to strip all indentation and write it like this as an alternative:

  

    
    
  It is a paragraph

  It is a second paragraph
    
  

That’s laborious to learn and annoying to keep up.
My Markdown utility handles this whitespace situation and generates the proper HTML no matter how your code is indented:

  

    
It is a paragraph
    
It is a second paragraph
  

Utilizing This in Your Framework
It’s straightforward. You need 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 are able to solely cross it by a prop.



{@html html}
And you need to use it like this:

It’s reasonably 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 net — lengthy sufficient to expertise the frustration of doing the identical issues again and again.
So I consolidated all the things I take advantage of into a couple 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 for those who’re occupied with higher DX as you construct your websites and apps!