Enhancing Astro With a Markdown Component

April 26, 2026 admin

There are two ways to enhance Markdown in an Astro project:

Through MDX
Through a Markdown Component

This article focuses on the Markdown Component.

Why Use a Markdown Component

I use a Markdown Component for two main reasons:

It reduces the amount of markup I need to write.
It converts typographic symbols like ' to opening or closing quotes (' or ').

So, I can skip several HTML tags — like , , , ,


, 
, and . I can also skip heading tags if I don’t need to add classes to them.

  
  
    ## Card Title
    This is a paragraph with **strong** and *italic* text.
    This is the second paragraph with a https://css-tricks.com/astro-markdown-component/(https://link-somewhere.com)

    - List
    - Of
    - Items
  

Notice the prettier-ignore comment? It tells prettier not to format the contents within the  block so Prettier won’t mess up my Markdown content.
The HTML output will be as follows:

   Card Title 
  This is a paragraph with strong and italic text.
  This is the second paragraph with a link

  

Installing the Markdown Component
Fun Fact: Astro came with a  component in its early release, but this  component was migrated to a separate plugin in Version 1, and completely removed in version 3.
I was upset about it. But I decided to build a Markdown component for myself since I liked using one. You can the documentation here.
Using the Markdown component is simple: Just import and use it in the way I showed you above.
---
import { Markdown } from '@splendidlabz/astro'
---


  ...

Respects Indentation Automatically
You can write your Markdown naturally, as if you’re writing content normally. This Markdown component detects the indentation and outputs the correct values (without wrapping them in 

 and  tags).




  
    
    
      This is a paragraph

      This is a second paragraph
    
  

Here’s the output:

  
    This is a paragraph
    This is a second paragraph
  

Inline Option
There’s an inline option that tells the  component not to generate paragraph tags.

   Ain't this cool? 

Here’s the output:

  Ain't this cool?

Gotchas and Caveats
Prettier messes up the  block if you have unicode characters like emojis and em dashes anywhere before the block.
Here’s the original code:


  Markdown block that contains Unicode characters 🤗




  Second Markdown block.

Here’s what it looks like after saving:


  Markdown block that contains unicode characters 🤗




  Second Markdown block.

Unfortunately, we can’t do much about emojis because the issue stems from Prettier’s formatter.
But, we can use en and em dashes by writing -- and ---, respectively.
Content Workaround
You can prevent Prettier from breaking all those  comments by not using them!
To do this, you just put your content inside a content property. No need to worry about whitespace as well — that’s taken care of for you.

Personally, I think it doesn’t look at nice as slot version above…
But it lets you use markdown directly with any JS or json content you load!
---
const content = `
  This is a paragraph

  This is another paragraph
`
---


Taking it Further
I’ve been building with Astro for 3+ years, and I kept running into the same friction points on content-heavy sites: blog pages, tag pages, pagination, and folder structures that get messy over time.
So I built Practical Astro: Content Systems — 7 ready-to-use solutions for Astro content workflows (MDX is just one of them). You get both the code and the thinking behind it.
If you want a cleaner, calmer content workflow, check it out.
I also write about Astro Patterns and Using Tailwind + CSS together on my blog. Come by and say hi!