Using MDX

Basic Elements

Text Formatting

Text formatting with MDX supports various styles

This is bold text and this is italic text

This is bold italic text and this is strikethrough

This is inline code and this is a link

You can also use underlined text when needed

Quotes

Regular quote

This is a basic quote

Nested quotes

First level

Second level

Third level

Quote with mixed content

Heading in quote

• List item in quote
• Another item

// Code in quote
console.log('Hello');

Lists and Items

Unordered list

• First item
• Second item
• Third item

Ordered list

1. First step
2. Second step
3. Third step

Nested list

• Main item
  • Sub-item 1
  • Sub-item 2
    • Deep item 1
    • Deep item 2
  • Sub-item 3
• Another item

Code Blocks

Inline code const example = true.

Basic JavaScript

function greeting(name) {
  return `Hello ${name}!`;
}
 
const result = greeting('World');
console.log(result);

TypeScript example

interface User {
  id: string;
  name: string;
  email: string;
}
 
function processUser(user: User): void {
  console.log(`Processing ${user.name}`);
}

React component

interface Props {
  title: string;
  children: React.ReactNode;
}
 
export function Card({ title, children }: Props) {
  return (
    <div className="card">
      <h2>{title}</h2>
      {children}
    </div>
  );
}

Tables

Layouts

Grid layout

Flex layout

Components

Accordion

Callout

Image

Link

Linked Card

Tabs

Basic tabs

Code tabs

function add(a, b) {
  return a + b
}

Resources

• MDX Documentation
• React Documentation
• TypeScript Handbook
• Accessibility Guidelines