Ashank

Testing All MDX Elements

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

This is a paragraph with bold text, italic text, and inline code. Let's also test a link to somewhere.

Lists

Unordered List

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

Ordered List

  1. First item
  2. Second item
    1. Nested item 1
    2. Nested item 2
  3. Third item

Blockquotes

This is a blockquote. It can contain multiple lines of text and can be used to highlight important information or quotes from other sources.

It can even have multiple paragraphs.

Code Blocks

Here's a TypeScript code block with syntax highlighting:

interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user';
}
 
function getUserInfo(user: User): string {
  return `${user.name} (${user.email}) - ${user.role}`;
}
 
// Example usage
const user: User = {
  id: '123',
  name: 'John Doe',
  email: '[email protected]',
  role: 'admin'
};
 
console.log(getUserInfo(user));

Here's some JSX/TSX code:

import { useState } from 'react';
 
interface CounterProps {
  initialCount: number;
}
 
export function Counter({ initialCount }: CounterProps) {
  const [count, setCount] = useState(initialCount);
  
  return (
    <div className="p-4 border rounded-lg">
      <p>Count: {count}</p>
      <button 
        onClick={() => setCount(c => c + 1)}
        className="px-4 py-2 bg-blue-500 text-white rounded"
      >
        Increment
      </button>
    </div>
  );
}

CSS example with syntax highlighting:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  padding: 2rem;
  background: linear-gradient(to right, #ff0000, #00ff00);
}
 
.card {
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  transition: transform 0.2s ease;
}
 
/* Hover effects */
.card:hover {
  transform: scale(1.02);
}

Shell/Bash commands:

# Install dependencies
npm install @tailwindcss/typography
 
# Run development server
npm run dev
 
# Build for production
npm run build

Math Examples

Here's Einstein's famous equation:

And here's a more complex equation:

And an integral:

Tables

| Feature | Description | Status | |---------|------------|--------| | MDX Support | Markdown + JSX | ✅ | | Code Highlighting | Using rehype-pretty-code | ✅ | | Math Support | Using KaTeX | ✅ | | Custom Components | React components in MDX | ✅ |