MDX Styling and Components Showcase

This post showcases all MDX styling capabilities and custom components available in our blog.

Basic Text Styling

Regular text is written like this. You can use bold text and italic text, as well as inline code. Of course, you can also use bold italic and strikethrough.

Links and Blockquotes

You can add external links or create internal links.

This is a blockquote. Use it to emphasize important information or showcase inspiring quotes.

It can span multiple lines too!

Lists

Unordered List

• First item
• Second item
  • Nested item 1
  • Nested item 2
    • Deeper nesting
• Third item

Ordered List

1. Step 1: Set up environment
2. Step 2: Write code
3. Step 3: Run tests
   1. Unit tests
   2. Integration tests
4. Step 4: Deploy

Code Blocks

Basic Code Fences

// Basic Shiki syntax highlighting
interface User {
  id: number;
  name: string;
  email: string;
}

function greetUser(user: User): string {
  return `Hello, ${user.name}!`;
}

Using the Code Component

// Displays with filename and language badge
const calculateSum = (numbers) => {
  return numbers.reduce((acc, num) => acc + num, 0);
};

const numbers = [1, 2, 3, 4, 5];
console.log(calculateSum(numbers)); // 15

# Install npm package
npm install @astrojs/mdx

# Start development server
npm run dev

Callout Components

Tables

FAQ Component

Horizontal Rules

You can use horizontal rules to separate content:

Images (Coming Soon)

Images will be automatically optimized through the Img component:

import Img from '@components/mdx/Img.astro';

<Img
  src="/images/example.jpg"
  alt="Descriptive text"
  width={800}
  height={600}
/>

Conclusion

This showcase demonstrates the main features available in our MDX blog:

✅ Markdown Syntax - Headings, lists, links, blockquotes, tables ✅ Code Highlighting - Automatic syntax highlighting via Shiki ✅ Custom Components - Callout, Code, FAQ ✅ SEO Optimization - Automatic structured data generation for FAQs ✅ Responsive Design - Works perfectly on all devices