Enhancing Astro With a Markdown Part

There are two methods to boost Markdown in an Astro undertaking:

By means of MDX
By means of a Markdown Part

This text focuses on the Markdown Part.

Why Use a Markdown Part

I exploit a Markdown Part for 2 primary causes:

It reduces the quantity of markup I want to jot down.
It converts typographic symbols like ' to opening or closing quotes (' or ').

So, I can skip a number of HTML tags — like , , , ,


, 
, and . I may also skip heading tags if I don’t want so as to add lessons to them.

  
  
    ## Card Title
    This can be a paragraph with **robust** and *italic* textual content.
    That is the second paragraph with a https://css-tricks.com/astro-markdown-component/(https://link-somewhere.com)

    - Listing
    - Of
    - Objects
  

Discover the prettier-ignore remark? It tells prettier to not format the contents inside the  block so Prettier received’t mess up my Markdown content material.
The HTML output shall be as follows:

   Card Title 
  This can be a paragraph with robust and italic textual content.
  That is the second paragraph with a hyperlink

  

Putting in the Markdown Part
Enjoyable Truth: Astro got here with a  element in its early launch, however this  element was migrated to a separate plugin in Model 1, and utterly eliminated in model 3.
I used to be upset about it. However I made a decision to construct a Markdown element for myself since I appreciated utilizing one. You may the documentation right here.
Utilizing the Markdown element is easy: Simply import and use it in the way in which I confirmed you above.
---
import { Markdown } from '@splendidlabz/astro'
---


  ...

Respects Indentation Robotically
You may write your Markdown naturally, as if you happen to’re writing content material usually. This Markdown element detects the indentation and outputs the proper values (with out wrapping them in 

 and  tags).




  
    
    
      This can be a paragraph

      This can be a second paragraph
    
  

Right here’s the output:

  
    This can be a paragraph
    This can be a second paragraph
  

Inline Choice
There’s an inline choice that tells the  element to not generate paragraph tags.

   Ain't this cool? 

Right here’s the output:

  Ain't this cool?

Gotchas and Caveats
Prettier messes up the  block when you’ve got unicode characters like emojis and em dashes wherever earlier than the block.
Right here’s the unique code:


  Markdown block that incorporates Unicode characters 🤗




  Second Markdown block.

Right here’s what it appears to be like like after saving:


  Markdown block that incorporates unicode characters 🤗




  Second Markdown block.

Sadly, we are able to’t do a lot about emojis as a result of the difficulty stems from Prettier’s formatter.
However, we are able to use en and em dashes by writing -- and ---, respectively.
Content material Workaround
You may forestall Prettier from breaking all these  feedback by not utilizing them!
To do that, you simply put your content material inside a content material property. No want to fret about whitespace as effectively — that’s taken care of for you.

Personally, I feel it doesn’t take a look at good as slot model above…
Nevertheless it permits you to use markdown instantly with any JS or json content material you load!
---
const content material = `
  This can be a paragraph

  That is one other paragraph
`
---


Taking it Additional
I’ve been constructing with Astro for 3+ years, and I saved working into the identical friction factors on content-heavy websites: weblog pages, tag pages, pagination, and folder constructions that get messy over time.
So I constructed Sensible Astro: Content material Programs — 7 ready-to-use options for Astro content material workflows (MDX is only one of them). You get each the code and the pondering behind it.
If you need a cleaner, calmer content material workflow, test it out.
I additionally write about Astro Patterns and Utilizing Tailwind + CSS collectively on my weblog. Come by and say hello!