Markdown and MDX pages in Astro - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a Markdown (.md) page in Astro?

A Markdown page in Astro is a simple text file using Markdown syntax to write content. Astro converts it into HTML for your website, making it easy to write and format text without coding HTML.

beginner

What does MDX stand for and how is it different from Markdown?

MDX stands for Markdown + JSX. It lets you write Markdown content but also include interactive components (like buttons or widgets) inside your text, which normal Markdown cannot do.

intermediate

How do you include a React component inside an MDX page in Astro?

You import the React component at the top of the MDX file and then use it like a tag inside the Markdown content. Astro processes this and renders the component where you placed it.

intermediate

Why use MDX pages instead of plain Markdown in Astro projects?

MDX pages let you mix content and interactive UI components. This is great for tutorials, blogs, or docs where you want live examples or dynamic parts inside your text.

beginner

What file extensions does Astro support for Markdown and MDX pages?

Astro supports .md for Markdown pages and .mdx for MDX pages. Use .md for simple content and .mdx when you want to add components inside your content.

Which file extension should you use for a page that includes React components inside Markdown content in Astro?

A .md

B .mdx

C .jsx

D .astro

MDX (.mdx) files allow embedding React components inside Markdown content.

What does MDX allow you to do that plain Markdown does not?

A Add interactive components inside content

B Write plain text only

C Use only HTML tags

D Create CSS styles

MDX lets you embed interactive UI components inside Markdown content.

In Astro, how do you import a component to use inside an MDX page?

A Use a script tag inside Markdown

B Write the component code inside the MDX file

C Components cannot be used in MDX

D Use an import statement at the top of the MDX file

You import components at the top of the MDX file to use them inside the content.

Which of these is NOT a benefit of using MDX pages in Astro?

A Writing plain text faster than Markdown

B Embedding live examples in blogs

C Creating dynamic documentation

D Mixing content with interactive components

MDX does not make writing plain text faster than Markdown; it adds interactivity.

What happens when Astro builds a Markdown (.md) page?

A It runs JavaScript inside the Markdown

B It ignores the file

C It converts Markdown to HTML for the website

D It converts Markdown to CSS

Astro converts Markdown content into HTML to display on the website.

Explain how MDX pages enhance content in Astro compared to plain Markdown pages.

Think about mixing text and live parts in one file.

Describe the steps to use a React component inside an MDX page in Astro.

Focus on how to bring the component into the MDX file and use it.

Practice

1. What is the main difference between Markdown and MDX in Astro?

easy

A. Markdown supports JavaScript code, but MDX does not.

B. Markdown files can run server code, MDX files cannot.

C. MDX is only for styling, Markdown is for content.

D. MDX allows embedding components inside Markdown content, while Markdown does not.

Solution

1. Step 1: Understand Markdown basics

   Markdown is a simple way to write formatted text like headings, lists, and links.

2. Step 2: Understand MDX extension

   MDX extends Markdown by allowing you to include interactive components inside the text.

3. Final Answer:

   MDX allows embedding components inside Markdown content, while Markdown does not. -> Option D

4. Quick Check:

   MDX = Markdown + components [OK]

Hint: Remember: MDX = Markdown + components [OK]

Common Mistakes:

• Thinking Markdown supports components
• Confusing MDX with styling only
• Believing Markdown runs server code

2. Which file extension should you use for a page that includes React components inside Markdown in Astro?

easy

A. .mdx

B. .astro

C. .md

D. .jsx

Solution

1. Step 1: Identify file types for Markdown and MDX

   Markdown files use .md extension, MDX files use .mdx extension to support components.

2. Step 2: Match file extension to React components inside Markdown

   To include React components inside Markdown, use .mdx files.

3. Final Answer:

   .mdx -> Option A

4. Quick Check:

   React components in Markdown = .mdx [OK]

Hint: Use .mdx for Markdown with components [OK]

Common Mistakes:

• Using .md for MDX content
• Confusing .astro with Markdown files
• Choosing .jsx which is for pure React files

3. Given this Astro MDX page snippet, what will be rendered?

---
import Button from '../components/Button.jsx';
---
# Welcome
Click me

medium

A. A syntax error because components can't be imported in MDX.

B. Only the heading 'Welcome' without the button.

C. A heading 'Welcome' and a clickable button labeled 'Click me'.

D. The button renders but the heading does not.

Solution

1. Step 1: Understand MDX import and usage

   MDX allows importing components at the top and using them inline in the Markdown content.

2. Step 2: Analyze the snippet output

   The heading '# Welcome' renders as a heading, and the <Button> component renders as a clickable button with text 'Click me'.

3. Final Answer:

   A heading 'Welcome' and a clickable button labeled 'Click me'. -> Option C

4. Quick Check:

   MDX imports + components = rendered output [OK]

Hint: MDX imports components, renders both text and UI [OK]

Common Mistakes:

• Thinking imports cause syntax errors in MDX
• Assuming components won't render inside MDX
• Ignoring Markdown headings when components are present

4. What is wrong with this Astro MDX page snippet?

---
import Alert from '../components/Alert.jsx'
---
# Notice
This is important

medium

A. No error; this code is correct.

B. Incorrect import path syntax.

C. Missing semicolon after import statement.

D. Missing closing quote in import statement.

Solution

1. Step 1: Check import syntax in MDX frontmatter

   In MDX frontmatter, semicolons are optional and import paths use quotes correctly.

2. Step 2: Verify component usage

   The Alert component is imported and used correctly inside the MDX content.

3. Final Answer:

   No error; this code is correct. -> Option A

4. Quick Check:

   MDX import syntax is flexible = correct [OK]

Hint: Semicolons optional in MDX imports [OK]

Common Mistakes:

• Expecting semicolons after imports
• Thinking import paths need special syntax
• Assuming missing semicolon causes error

5. You want to create a blog post in Astro that uses Markdown for text and includes a custom interactive component for comments. Which approach is best?

hard

A. Write the entire post in .md and import the component inside it.

B. Use .mdx for the post so you can embed the comment component directly.

C. Create a .astro page and write Markdown inside it manually.

D. Use .md and add the component via client-side JavaScript after page load.

Solution

1. Step 1: Understand Markdown limitations

   Plain .md files cannot embed components directly; they are static content.

2. Step 2: Consider MDX advantages

   .mdx files allow mixing Markdown with components, perfect for interactive elements like comments.

3. Step 3: Evaluate other options

   .astro pages can include Markdown but require more setup; client-side JS injection is less clean and less integrated.

4. Final Answer:

   Use .mdx for the post so you can embed the comment component directly. -> Option B

5. Quick Check:

   Interactive + Markdown = MDX [OK]

Hint: Embed components directly by using .mdx files [OK]

Common Mistakes:

• Trying to import components in plain .md files
• Ignoring MDX for interactive content
• Overcomplicating with client-side JS injection