Custom MDX Components Demo
Custom MDX Components Demo
This blog post demonstrates the custom MDX components that enhance the reading experience on Make89. Each component is designed to provide better visual hierarchy and interactivity.
Code Blocks with Copy Functionality
Our enhanced code blocks include language detection and one-click copying:
interface BlogPost {
title: string;
date: string;
content: string;
tags: string[];
}
const formatDate = (date: string): string => {
return new Date(date).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
});
};Interactive Callouts
This is an informational callout that helps highlight important concepts or additional context.
Warning callouts draw attention to critical information that readers shouldn't miss.
Success callouts are perfect for highlighting achievements or positive outcomes.
Tip callouts share helpful advice and best practices with readers.
Enhanced Tables
Our tables are responsive and styled for better readability:
| Component | Purpose | Features | | --------------- | --------------------- | ---------------------------------- | | CodeBlock | Syntax highlighting | Copy button, language detection | | Callout | Information hierarchy | Multiple types, custom titles | | MDXImage | Rich media display | Zoom functionality, captions | | ProjectShowcase | Project integration | Dynamic loading, responsive design |
Project Showcases
Here's how we can embed project cards directly in blog posts:
Inline Code and Links
We also have enhanced inline code styling and support for all standard markdown features like links and bold text.
This is an enhanced blockquote that stands out with custom styling and better visual hierarchy.
What's Next?
These components make our blog more engaging and provide better ways to present technical content. Future enhancements will include:
- Syntax highlighting for code blocks
- Interactive code playgrounds
- Expandable sections
- Progress indicators for long posts
The MDX system gives us the flexibility to create rich, interactive content while maintaining the simplicity of markdown writing.