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 <p> , <strong> , <em> , <ul> , <ol> , <li> , and <a> . I can also skip heading tags if I don’t need to add classes to them.

<div class="card"> <!-- prettier-ignore --> <Markdown> ## Card Title This is a paragraph with **strong** and *italic* text. This is the second paragraph with a [link](https://link-somewhere.com)

- List - Of - Items </Markdown> </div>

Notice the prettier-ignore comment?…