MDX Hello World Showcase

This page demonstrates various MDX components and syntax, including text formatting, links, lists, blockquotes, code blocks, tables, task lists, horizontal rules, math equations, and footnotes. It serves as a comprehensive guide to help you understand MDX parsing and its capabilities.

Text Formatting#

You can use italic, bold, and bold italic text.

You can also use strikethrough and inline code.

Links#

Here's a link to MDX documentation.

Lists#

Unordered list:

• Item 1
• Item 2
  • Subitem 2.1
  • Subitem 2.2
• Item 3

Ordered list:

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

Blockquotes#

This is a blockquote. It can span multiple lines.

Code Blocks#

Inline code: console.log("Hello, MDX!");

JavaScript code block:

const greeting = "Hello, MDX!";
console.log(greeting);

Python code block:

print("Hello, MDX!")

Tables#

Task Lists#

• Learn MDX basics
• Master advanced MDX concepts
• Build an MDX-powered website

Horizontal Rule#

Math Equations#

$y = mx + b$

Footnotes#

Here's a sentence with a footnote.¹

Conclusion#

This page showcases various MDX components and syntax. Happy MDX parsing!

Random Code Demo#

for (const el of enterElements) {
  el.classList.add('transition-enter')
  el.classList.add('transition-enter-from')
}
 
// Replace the children of the container with
// elements from the new code
container.replaceChildren(...newChildren)
// Force layout reflow
forceReflow()
 
for (const el of enterElements) {
  el.classList.remove('transition-enter-from')
  el.classList.add('transition-enter-to')
}
 
// Here the transition starts
// from `.transition-enter-from` to `.transition-enter-to`
 
for (const el of enterElements) {
  // Transition Finished
  el.addEventListener('transitionend', () => {
    el.classList.remove('transition-enter-to')
  })
}