There are two methods to reinforce Markdown in an Astro venture:
- Via MDX
- Via a Markdown Element
This text focuses on the Markdown Element.
Why Use a Markdown Element
I take advantage of a Markdown Element for 2 primary causes:
- It reduces the quantity of markup I want to write down.
- It converts typographic symbols like
'to opening or closing quotes ('or').
So, I can skip a number of HTML tags — like , , , ,
, and
## 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)
- Checklist
- Of
- Gadgets
Discover the prettier-ignore remark? It tells prettier to not format the contents inside the
The HTML output might 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 Element
Enjoyable Reality: Astro got here with a
I used to be upset about it. However I made a decision to construct a Markdown element for myself since I preferred utilizing one. You may the documentation right here.
Utilizing the Markdown element is straightforward: Simply import and use it in the best way I confirmed you above.
---
import { Markdown } from '@splendidlabz/astro'
---
...
Respects Indentation Mechanically
You may write your Markdown naturally, as in the event you’re writing content material usually. This Markdown element detects the indentation and outputs the proper values (with out wrapping them in
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
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 properly — that’s taken care of for you.
Personally, I feel it doesn’t have a look at good as slot model above…
But it surely permits you to use markdown straight 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 operating into the identical friction factors on content-heavy websites: weblog pages, tag pages, pagination, and folder buildings 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 considering 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!
