mdx kitchen sink

This page contains every MDX formatting option this site supports, all on one page. I use this to check the styles during development.

This is a paragraph with bold text, italic text, inline code, and a link to nowhere.

Heading 2

Subheadings are created with hash symbols. The number of hashes indicates the heading level. For example, ## creates a level 2 heading, while ### creates a level 3 heading.

Heading 3

This is a paragraph. Obviously, we can have multiple paragraphs. I add some filler text here to show the spacing between consecutive text blocks.

Paragraphs are separated by blank lines. This is a second paragraph to show the spacing between consecutive text blocks.

Unordered list

We can create unordered lists using hyphens, asterisks, or plus signs. For example:

• First item
  • Nested item
  • Second nested item
• Second item
• Third item with bold and italic

As soon as we have enough space in the margins, we move the bullet points out.

Ordered list

We can create ordered lists using numbers followed by periods. For example:

1. First item
   1. Nested item
   2. Second nested item
2. Second item
3. Third item with inline code
4. Fourth item with a link
   1. Nested item with bold, italic, and inline code
5. Fifth item with bold, italic, and inline code
6. Sixth item with a very long text that should wrap to the next line to demonstrate how the list handles long items without breaking the layout or causing overflow issues, ensuring that the design remains intact and visually appealing even when the content is verbose.
7. Seventh item to show that the list continues to work properly after a long item.
8. Eighth item to further demonstrate the robustness of the list styling and layout, confirming that it can handle a variety of content lengths and formats without any issues.
9. Ninth item to ensure that the list maintains its structure and readability even as it grows longer, providing a consistent user experience regardless of the number of items or the length of their content.
10. Tenth item to conclude the ordered list and confirm that all items are styled correctly and that the numbering continues sequentially without any breaks or errors, demonstrating the reliability of the list formatting across different content scenarios.

As soon as we have enough space in the margins, we move the numbers out.

Blockquote

This is a blockquote. It can contain bold, italic, and inline code. It gets a green left border and a dark background.

This is a blockquote. It can contain multiple paragraphs, and the styling should apply to all of them.

This is the second paragraph of the blockquote, demonstrating that the styling applies to all paragraphs within the blockquote, not just the first one.

– Pierre Spring

Code block

interface Post {  title: string;  date: Date;  description?: string;  tags: string[];}function greet(name: string): string {  // this is a very long comment that should trigger the scrollbar in the code block, allowing us to test that feature as well. It should be super long, so that we can be sure it works properly and doesn't cause any layout issues or overflow problems in the design of the code block component.  return `Hello, ${name}!`;}

Picture

Full-bleed picture