Heading 1

This is a paragraph of text to test the styling of regular text content. This text is bold and this text is italic.

Heading 2

This is a paragraph of text to test the styling of regular text content. This text is bold and this text is italic.

Heading 3

This is a paragraph of text to test the styling of regular text content. This text is bold and this text is italic.

Heading 4

This is a paragraph of text to test the styling of regular text content. This text is bold and this text is italic.

Heading 5

This is a paragraph of text to test the styling of regular text content. This text is bold and this text is italic.

Heading 6

This is a paragraph of text to test the styling of regular text content. This text is bold and this text is italic.

Here's a line break above this sentence.

Here's another paragraph followed by a blockquote:

This is a blockquote. It should be styled differently from a regular paragraph. So says the blockquote.

Lists

Unordered List:

• Item 1
• Item 2
• Item 3

Ordered List:

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

Code

Here's a code block:

javascriptCopy
const greet = (name) => {
  return `Hello, ${name}!`;
};

console.log(greet("World"));

The mdx-components Module

Styling for MDX content is handled via the mdx-components module, which provides a set of components for styling content. This sample MDX file demonstrates the styling of various HTML elements using the mdx-components module.

typescriptCopy
    h1: (props) => <h1 className="text-4xl font-black pb-4" {...props} />,
    h2: (props) => <h2 className="text-3xl font-bold pb-4" {...props} />,
    p: (props) => <p className="text-lg pb-4" {...props} />,