MDX Styling Test Page

Table of Contents

• Typography Elements
  • Lists
    • Code Blocks
      • Blockquotes
        • Tables
• Images
• Horizontal Rules
• Links

Typography Elements

Paragraphs like this one use proper text styling with balanced line height and spacing. You can include bold text for emphasis or italic text for distinction. You can also use bold and italic together when needed.

Lists

Unordered lists are styled with proper bullets and spacing:

• First item in the list
• Second item with some bold text
• Third item containing a link to mfyz.com
• Fourth item with some inline code

Ordered lists have proper numbering and consistent styling:

1. First ordered item
2. Second ordered item
3. Third ordered item with italic text
4. Fourth ordered item

Code Blocks

Inline code like const greeting = "Hello, world!"; is styled with a distinctive background.

Code blocks have syntax highlighting and proper spacing:

function testFunction() {
  // This is a comment
  const message = "Hello from MDX styling!";
  console.log(message);
  return true;
}

// Call the function
testFunction();

Blockquotes

Blockquotes are styled with a distinctive left border and italic text:

This is a blockquote to demonstrate the styling. It has a subtle left border and proper spacing to distinguish it from regular paragraphs.

You can have multiple paragraphs within a blockquote, and they maintain consistent styling.

Tables

Tables have clean borders and alternating row colors for better readability:

Name	Role	Department
John Smith	Developer	Engineering
Jane Doe	Designer	Design
Bob Johnson	Manager	Operations
Alice Brown	Director	Executive

Images

Images have rounded corners and a subtle hover animation. Here’s an example image:

Long image:

Horizontal Rules

Horizontal rules provide visual separation between sections:

---

Links

Links are styled with distinct colors and hover effects: visit mfyz.com

External links automatically open in a new tab for better user experience.