MDX Showcase: Level 1 Heading (H1 from Title)

This post demonstrates standard Markdown and advanced MDX features available in Astro. The current year is 2025.

Markdown Basics: Level 2 Heading

Let’s cover some bold text, italic text, and bold italic text. We can also use strikethrough.

Paragraphs are separated by blank lines. This is a second paragraph demonstrating basic text flow.

This is a blockquote. It can span multiple lines.

Nested blockquotes are also possible.

---

Lists

Unordered List

• Item 1
• Item 2
  • Nested Item 2a
  • Nested Item 2b
• Item 3

Ordered List

1. First item
2. Second item
   1. Nested ordered item
   2. Another nested item
3. Third item

Task List

• Completed task
• Incomplete task
• Another task to do

---

Code Blocks and Inline Code

Inline code looks like const example = true;.

// JavaScript Code Block
function greet(name) {
    // Template literal example
    const message = `Hello, ${name}! Welcome to the MDX showcase.`
    console.log(message)
    return message
}

greet("Developer")

/* CSS Code Block */
body {
    font-family: sans-serif;
    line-height: 1.6; /* Good practice */
}

.note {
    padding: 1em;
    border-left: 5px solid blue;
    background-color: #f0f8ff;
}

<!-- HTML Code Block -->
<div>
    <h1>Hello World</h1>
    <p>This is an HTML snippet.</p>
    <button onclick="alert('Clicked!')">Click Me</button>
</div>

# Bash/Shell Code Block
npm install
npm run dev
echo "Server started!"

{
    "name": "example-package",
    "version": "1.0.0",
    "description": "A JSON example",
    "dependencies": {
        "astro": "latest"
    }
}

Here’s the same JavaScript example using Astro’s <Code /> component:

// JavaScript Code Block via <Code /> component
function greet(name) {
// Template literal example
const message = `Hello, ${name}! Welcome to the MDX showcase.`;
console.log(message);
return message;
}

greet('Developer');

---

Links and Images

This is an inline link to Astro’s website.

This is a reference-style link to Google.

Here’s an image using an HTML <img> tag (from public folder):

---

Tables

Feature	Support Level	Notes
Headings	Excellent	H1-H6 supported
Lists	Excellent	Ordered, Unordered, Task
Code Blocks	Excellent	With Shiki syntax highlighting
Tables	Good	Standard Markdown table syntax
MDX Components	Excellent	Import .astro or framework components

---

MDX Features

We can use JSX expressions like {Math.random().toFixed(3)} to display dynamic values.

Importing Components

Below is an imported Astro component:

Using HTML Directly

MDX allows using standard HTML tags directly within the file.

Click to Expand Details

This content is hidden until the summary element is clicked. Useful for FAQs or supplementary information without cluttering the main flow. You can include any HTML or Markdown here.

• Detail 1
• Detail 2

Other HTML Elements

MDX allows various standard HTML elements for semantic meaning:

Definition Term

This is the definition description.

Another Term

Description for the second term.

You can mark text using the mark tag.

Press Ctrl + C to copy text.

The chemical formula for water is H₂O.

The equation E = mc² is famous.

The W3C sets web standards.

---

Footnotes

Here’s some text with a footnote.¹ And another one.²

---

Level 3 Heading

Level 4 Heading

Level 5 Heading

Level 6 Heading

Even placeholder images can be integrated using standard Markdown or HTML tags within MDX.

This demonstrates the flexibility of combining content and presentation elements.

This concludes the showcase of various Markdown and MDX features. Check the rendered output in production!

Footnotes

1. This is the first footnote. ↩

2. This is a longer footnote that provides more detailed explanation or citation. It can span multiple lines if needed, just ensure subsequent lines are indented. ↩