This post demonstrates the MDX formatting options available.

Text Formatting

Regular paragraph text with bold text, italic text, and bold italic text. You can also use inline code for technical terms like npm install or file names like package.json.

Here's a link to Google and here's some strikethrough text.

Headings

This is H1

This is H2

This is H3

This is H4

This is H5

This is H6

Lists

Unordered List

• First item
• Second item with bold
• Third item with code
  • Nested item one
  • Nested item two
• Fourth item

Ordered List

1. First step
2. Second step
3. Third step with inline code
4. Fourth step
   1. Sub-step A
   2. Sub-step B

Blockquotes

This is a simple blockquote. It can contain multiple sentences.

Note: Blockquotes can be used for highlighting important information.

Code Blocks

JavaScript

const greeting = "Hello, World!";
 
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}
 
console.log(fibonacci(10)); // 55

TypeScript React Component

import React, { useState } from 'react';
 
interface Props {
  title: string;
  count?: number;
}
 
const Counter: React.FC<Props> = ({ title, count = 0 }) => {
  const [value, setValue] = useState(count);
 
  return (
    <div>
      <h1>{title}</h1>
      <p>Count: {value}</p>
      <button onClick={() => setValue(v => v + 1)}>
        Increment
      </button>
    </div>
  );
};
 
export default Counter;

Docker Compose

version: '3.8'
services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - DATABASE_URL=postgres://user:pass@db:5432/mydb
    depends_on:
      - db
 
  db:
    image: postgres:15
    volumes:
      - postgres_data:/var/lib/postgresql/data
    environment:
      POSTGRES_DB: mydb
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
 
volumes:
  postgres_data:

Bash Commands

# Install dependencies
npm install
 
# Run development server
npm run dev
 
# Build for production
npm run build
 
# Deploy with Docker
docker compose up -d

JSON Configuration

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

Tables

Images

Image with caption:

Dota 2 Hero - Ogre Magi

Image without caption:

Image with explicit size:

Mixed Content

Example combining multiple elements:

1. Install the dependencies:

   Bash

   npm install next-mdx-remote

2. Configure Next.js:

   MDX content is compiled server-side for better performance.

3. Create .mdx files with frontmatter:

   YAML

   ---
   title: "My First Post"
   date: "2024-12-22"
   ---

Horizontal Rule

Above this is content.

Below the horizontal rule is more content.

Interactive Demos

Embedded 3D cube:

Particles animation:

Chart demo:

YouTube Embeds

YouTube videos can be embedded using the same Embed component:

External Links

Links automatically open in new tabs when external:

• Google
• GitHub
• Next.js Docs

Internal links stay in the same tab:

• Home
• Blogs
• Stocks

Custom JSX

Summary

This post covers:

• Text formatting (bold, italic, code, links)
• Headings (H1-H6)
• Lists (ordered and unordered with nesting)
• Blockquotes
• Code blocks (multiple languages with syntax highlighting)
• Tables
• Images (with captions, sizing)
• Horizontal rules
• Interactive embedded components
• Custom JSX