MDX Features Cheatsheet

This document demonstrates all available MDX features for our blog posts. Use it as a reference when writing new blog posts.

1. Frontmatter

Every MDX file starts with frontmatter between --- delimiters. Here’s what you can include:

---
publishDate: 2024-04-03T00:00:00Z
title: Your Title
excerpt: A brief description
image: https://example.com/image.jpg
category: Category Name
tags:
  - tag1
  - tag2
metadata:
  canonical: https://your-site.com/your-post
---

2. Markdown Basics

Headers

H1 Header

H2 Header

H3 Header

H4 Header

Text Formatting

• Bold text using **text**
• Italic text using *text*
• Strikethrough using ~~text~~
• Code using backticks

Lists

Unordered List

• Item 1
• Item 2
  • Nested item
  • Another nested item
• Item 3

Ordered List

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

Links and Images

Links

Link text

Images

3. MDX Components

Importing Components

import MyComponent from '~/components/MyComponent.astro';

Using Components

Example Component

Theme Toggle

4. Tables

| Feature | Description | Example | | --------- | ------------------------- | ------- | ------ | ------ | ---- | --- | | Tables | Create tables using pipes | | Header | Header | | | Alignment | Use colons for alignment | | :--- | :---: | ---: | | | Content | Add content in cells | | Cell | Cell | |

5. Code Blocks

Basic Code Block

const hello = 'world';
console.log(hello);

Code Block with Language

interface User {
  name: string;
  age: number;
}

Code Block with Line Numbers

import React from 'react';

function App() {
  return <div>Hello World</div>;
}

6. Blockquotes

This is a blockquote. It can span multiple lines.

And have paragraphs.

7. Horizontal Rules

8. Task Lists

• Completed task
• Incomplete task

9. Footnotes

Here’s a sentence with a footnote¹.

10. Math Equations

When using KaTeX or MathJax:

$$ E = mc^2 $$

11. Custom Components with Props

<MyComponent title="Example Title" description="This is a description" tags={['tag1', 'tag2']} />

12. MDX Expressions

You can use JavaScript expressions in your MDX:

2+2 = 4

new Date() = 4/17/2025

13. Comments

14. Escaping Characters

To display special characters like * or `, use a backslash before them.

15. Best Practices

1. Keep your frontmatter organized and complete
2. Use semantic HTML when needed
3. Break long content into sections
4. Use components for reusable UI elements
5. Keep code blocks properly formatted
6. Use tables for structured data
7. Include alt text for images
8. Use proper heading hierarchy

16. Common Gotchas

1. Always use proper spacing between sections
2. Remember to close all tags
3. Use proper indentation in code blocks
4. Escape special characters when needed
5. Use proper line breaks between elements

This cheatsheet covers the main features available in MDX. For more information, refer to the MDX documentation.