This is a complete example showing how to write blog posts in MDX format using all available components.

Text Formatting

You can use bold text, italic text, strikethrough, and inline code just like regular Markdown.

Here's a blockquote:

"The best way to predict the future is to invent it." — Alan Kay

Lists

Unordered list:

• First item
• Second item
  • Nested item
  • Another nested item
• Third item

Ordered list:

1. First step
2. Second step
3. Third step

Task list:

• Completed task
• Pending task
• Another pending task

Links

You can link to external sites or use relative links like about page.

Callouts

Use callouts to highlight important information. We have 5 different styles:

Custom: This is a purple-themed callout. Use it for brand-specific or special messages!

You can also customize labels:

Code Blocks

Basic Code Block

1
2
3
4
5
6

function greet(name: string): string {
  return `Hello, ${name}!`
}

const message = greet("World")
console.log(message)

With Line Highlighting

You can highlight specific lines to draw attention:

1
2
3
4
5
6
7

const config = {
  apiUrl: process.env.API_URL,
  timeout: 5000,
  retries: 3,
}

export default config

Lines 2-4 are highlighted above!

Without Line Numbers

1
2
3

npm install @dsqr/dodo
npm install @dsqr/durable-lambda
bun add typescript-go-overlay

Multiple Languages

JavaScript:

1

const hello = (name) => `Hello, ${name}!`

Python:

1
2

def hello(name):
    return f"Hello, {name}!"

Rust:

1
2
3

fn hello(name: &str) -> String {
    format!("Hello, {}!", name)
}

Nix:

1
2
3
4

{ pkgs ? import <nixpkgs> {} }:
pkgs.mkShell {
  buildInputs = [ pkgs.hello ];
}

Images

Basic Image

Image with Caption

This is a caption explaining what the image shows. Very helpful for context!

Image with Caption and Credit

Our team working on the next big thing Photo by Jane Doe

Different Aspect Ratios

Use HTML-style attributes for advanced features:

Zoomable Images

By default, images are zoomable (click to see full size). To disable:

Animated GIFs

Tables

Advanced Examples

Code with Callout

import { BlogPost } from "@/components/ui/blog-post"

export default function MyPost() {
  return <BlogPost>...</BlogPost>
}

Side-by-Side Images

Before

After

Nested Callouts

npm test
npm run build
npm run deploy

note You can nest callouts if needed, but use sparingly for readability. ::: :::

Horizontal Rules

Use three or more dashes for a horizontal rule:

Like that!

Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Math (if supported)

Inline math: $E = mc^2$

Block math: $$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

Conclusion

That's everything! You now know how to use:

• ✅ All 5 callout variants (note, tip, warning, important, purple)
• ✅ Code blocks with line numbers and highlighting
• ✅ Images with captions, credits, and aspect ratios
• ✅ Animated GIF support
• ✅ Zoomable images
• ✅ Tables, lists, links, and all text formatting
• ✅ Math equations (if enabled)

Happy writing! 🎉

Meta Information

Note: The frontmatter at the top of this file defines:

• title: Post title
• category: TIL, Blog, NixWithMe, or Life
• published: true/false
• createdAt: Publication date
• readingTimeMinutes: Estimated reading time

You can write your blog posts in pure MDX and they'll automatically get all the styling and components!