Powering Up Markdown with Astro Components
In our previous post, we explored how to create an “Active Whiteboard” look using CSS classes. While effective, writing raw HTML like <div class="scribble-box"> inside Markdown can get messy.
Enter Astro Components.
By wrapping our CSS styles in reusable components, we can write clean, semantic MDX that looks great and is easy to maintain.
The Component Approach
Instead of remembering complex class names, we can just import and use components directly in our Markdown.
1. The Scribble Box
Clean Syntax: This box is rendered using the <ScribbleBox> component.
<ScribbleBox>
<strong>Clean Syntax:</strong> This box is rendered using...
</ScribbleBox>2. Highlights and Circles
We can mix components inline with text. For example, we can highlight important terms or circle key numbers.
We can <ScribbleHighlight>highlight important terms</ScribbleHighlight>...Building a Flow Chart
Look how readable the code becomes when building complex diagrams:
Step 1
Write MDX
Step 2
Import Components
Step 3
Enjoy Result
Why This Matters
- Maintainability: Change the style in one component, and it updates everywhere.
- Readability: MDX files remain focused on content, not markup.
- Power: You can add complex logic (like interactivity or data fetching) inside these components.
This is the power of Astro: bringing the best of component-driven development to your content-heavy sites.
