Menu

Enhancing Astro With a Markdown Component | CSS-Tricks
📰
0

Enhancing Astro With a Markdown Component | CSS-Tricks

CSS-Tricks·@HashtagPLUS·about 1 month ago
#RcPRRwIi
#markdown#astro#store#ms#why#prettier
Reading 0:00
15s threshold

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? It tells prettier not to format the contents within the <Markdown> block so Prettier won’t mess up my Markdown content.…

Continue reading — create a free account

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

Read More