MDX Formatting Reference Guide

This post demonstrates all available Markdown and MDX formatting options you can use in your blog posts.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text Formatting

Bold text or bold text

Italic text or italic text

Bold and italic or bold and italic

Strikethrough text

Inline code for technical terms

Links

External link

Link with title

Auto-linked URL: https://auto-linked-url.com

Lists

Unordered Lists

• Item 1
• Item 2
  • Nested item 2.1
  • Nested item 2.2
    • Deeply nested item
• Item 3

• Alternative bullet style
• Another item

Ordered Lists

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

Task Lists

• Completed task
• Incomplete task
• Another task to do

Blockquotes

This is a blockquote. It can span multiple lines.

Note: You can use formatting inside blockquotes.

• Even lists
• Like this

Nested Blockquotes

This is a quote

This is a nested quote

This is deeply nested

Code Blocks

Inline Code

Use const variable = value for inline code.

Code Blocks with Syntax Highlighting

// JavaScript example
function greet(name) {
  console.log(`Hello, ${name}!`);
  return true;
}

const result = greet("World");

# Python example
def calculate_sum(a, b):
    """Calculate the sum of two numbers."""
    return a + b

result = calculate_sum(5, 3)
print(f"Result: {result}")

// TypeScript example
interface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 1,
  name: "John Doe",
  email: "[email protected]"
};

# Bash commands
npm install
npm run dev
git commit -m "Update post"

{
  "name": "example",
  "version": "1.0.0",
  "description": "JSON example"
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}

Tables

Aligned Tables

Horizontal Rules

Images

Image with Link

Emphasis and Special Characters

Use backslash to escape special characters: * _ ` # [ ]

Superscript: x^2^ (if supported)

Subscript: H2O (if supported)

Footnotes

Here's a sentence with a footnote¹.

Another reference².

Definition Lists

Term 1 : Definition 1

Term 2 : Definition 2a : Definition 2b

Abbreviations

The HTML specification is maintained by the W3C.

*[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium

Emojis

You can use emojis directly: 🚀 ✨ 💡 🎉 ❤️ 🔥 👍 🌟

Or use emoji codes: :rocket: :sparkles: :bulb:

Math (if supported)

Inline math: $E = mc^2$

Block math:

HTML Elements

You can use HTML directly in MDX:

Keyboard Keys

Press Ctrl + C to copy.

Use ⌘ + V to paste on Mac.

Alerts and Callouts

💡 Tip: This is a helpful tip for readers.

⚠️ Warning: Be careful with this operation.

❌ Error: This will cause an error.

✅ Success: Operation completed successfully.

ℹ️ Info: Additional information here.

Nested Lists with Mixed Types

1. First ordered item
   • Unordered sub-item
   • Another sub-item
     1. Nested ordered item
     2. Another nested ordered item
2. Second ordered item
   • Task in a nested list
   • Completed task

Long Code Block with Line Numbers

// Complex example with multiple concepts
class BlogPost {
  constructor(title, content, tags) {
    this.title = title;
    this.content = content;
    this.tags = tags;
    this.createdAt = new Date();
  }

  publish() {
    console.log(`Publishing: ${this.title}`);
    return {
      success: true,
      timestamp: this.createdAt
    };
  }

  addTag(tag) {
    if (!this.tags.includes(tag)) {
      this.tags.push(tag);
    }
  }

  getTags() {
    return this.tags.join(', ');
  }
}

const post = new BlogPost(
  "My First Post",
  "This is the content",
  ["Tech", "AI"]
);

post.addTag("Automation");
console.log(post.getTags());

Combining Elements

You can combine multiple formatting elements:

• Bold item with italic text and inline code
• Link with bold text

• Blockquote with bold and italic

Special Use Cases

Code with Output

$ npm run build

> build
> next build

✓ Creating an optimized production build
✓ Compiled successfully

Multi-line Blockquote with Code

When working with React components:

Copy

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

Remember to always return valid JSX.

Summary

This reference covers:

1. ✅ All heading levels (H1-H6)
2. ✅ Text formatting (bold, italic, strikethrough)
3. ✅ Links and images
4. ✅ Lists (ordered, unordered, nested, tasks)
5. ✅ Code blocks with syntax highlighting
6. ✅ Tables with alignment
7. ✅ Blockquotes and nested quotes
8. ✅ HTML elements and custom styling
9. ✅ Special characters and emojis
10. ✅ Advanced formatting combinations

Tags used in this post: Family, Personal, AI, Technology

Copy and modify sections from this post to create your own beautifully formatted content!