TestMDXDocumentation

MDX Test Post - All Available Sections

5 min read

This test post demonstrates all the different MDX sections and formatting options available for blog posts. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Headings

H3 - Third Level Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

H4 - Fourth Level Heading

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

H5 - Fifth Level Heading

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

H6 - Sixth Level Heading

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Text Formatting

This paragraph contains bold text, italic text, and bold italic text. You can also use strikethrough for deleted content.

Here’s some inline code within a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Nested blockquote with formatting

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a nested blockquote inside the first one.

Lists

Unordered List

  • First item lorem ipsum dolor sit amet
  • Second item consectetur adipiscing elit
    • Nested item one
    • Nested item two
      • Deep nested item
  • Third item sed do eiusmod tempor

Ordered List

  1. First step in the process
  2. Second step with more details
    1. Sub-step one
    2. Sub-step two
  3. Third step to complete

Task List

  • Completed task item
  • Another completed task
  • Pending task item
  • Future task to complete

Code Blocks

JavaScript

// Example JavaScript code
function greetUser(name) {
  const greeting = `Hello, ${name}!`;
  console.log(greeting);
  return greeting;
}

const users = ['Alice', 'Bob', 'Charlie'];
users.forEach(user => greetUser(user));

TypeScript

interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

async function fetchUsers(): Promise<User[]> {
  const response = await fetch('/api/users');
  const data: User[] = await response.json();
  return data.filter(user => user.isActive);
}

CSS

.card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

Shell/Bash

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

Tables

FeatureStatusPriority
Dark ModeCompleteHigh
Responsive DesignCompleteHigh
Search FunctionIn ProgressMedium
CommentsPlannedLow

Aligned Table

Left AlignedCenter AlignedRight Aligned
Lorem ipsumdolor sitamet
consecteturadipiscingelit
sed doeiusmodtempor

Images

Single Image

Gradient tools showcase

Multiple Images

Here are some project screenshots:

Project screenshot one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Color palette generator

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Todo list application

Mixed Content Section

Project Showcase

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Here’s what we built:

  1. Frontend: React with TypeScript
  2. Backend: Node.js with Express
  3. Database: PostgreSQL

Web inspiration gallery

“The best way to predict the future is to invent it.” - Alan Kay

Key features include:

  • Responsive design for all devices
  • Dark mode support
  • Fast page loads with lazy loading
  • SEO optimized
// Quick setup
const app = createApp({
  theme: 'dark',
  responsive: true,
  lazyLoad: true
});

app.mount('#root');

Footnotes

Here’s a sentence with a footnote1. And another one2.

Definition Lists (using bold/description pattern)

HTML : HyperText Markup Language - the standard markup language for documents designed to be displayed in a web browser.

CSS : Cascading Style Sheets - a style sheet language used for describing the presentation of a document written in HTML.

JavaScript : A programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS.

Horizontal Rules

You can create horizontal rules using three or more dashes, asterisks, or underscores:

Final Notes

This test post demonstrates the various MDX formatting options available. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Valentine's Day 3D icons

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Footnotes

  1. This is the first footnote with additional context and explanation. ↩

  2. This is the second footnote. You can include formatting and code in footnotes. ↩

DB

© 2026 Darrell

Github
RSS