Menu

Markdown + Astro = ❤️ | CSS-Tricks
🖼️
0

Markdown + Astro = ❤️ | CSS-Tricks

CSS-Tricks·@HashtagPLUS·about 1 month ago
#k16lsZN2
#mdx#astro#markdown#x2764#xfe0f#import
Reading 0:00
15s threshold

Markdown is a great invention that lets us write less markup. It also handles typographical matters like converting straight apostrophes ( ' ) to opening or closing quotes ( ' or ' ) for us. Although Astro has built-in support for Markdown via .md files, I’d argue that your Markdown experience can be enhanced in two ways: MDX Markdown Component I’ve cover these in depth in Practical Astro: Content Systems . We’re going to focus on MDX today. MDX MDX is a superset of Markdown. It lets you use components in Markdown and simple JSX in addition to all other Markdown features. For Astro, you can also use components from any frontend framework that you have installed. So you can do something like: --- # Frontmatter... --- import AstroComp from '@/components/AstroComp.astro' import SvelteComp from '@/components/AstroComp.astro' <AstroComp> ... </AstroComp> <SvelteComp> ... </SvelteComp> It can be a great substitute for content-heavy stuff because it lets you write markup like the following.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More