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')
  })
}