Docs

Using MDX

A guide how to use Markdown elements and React components.

Was this helpful?

Fuel Your Swim

Get a free personalized nutrition plan to improve your swimming performance.

Optional children content appears below the description.

July 8-12th

T&T Exclusive

Improve your swim, beat your times

Registration closes June 1. Limited spots available.

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

First step
Second step
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

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

Layouts

Grid layout

Item 1

Item 2

Item 3

Flex layout

Left

Right

Components