MDX Components Guide

This guide showcases all the custom components available in your documentation.

Text Formatting

You can use bold text, italic text, and inline code in your documentation.

Links

Internal links work automatically: Getting Started

External links open in a new tab: Next.js

Code Blocks

Code blocks include syntax highlighting and a copy button that appears on hover:

text

interface User {
  id: string
  name: string
  email: string
}
 
async function getUser(id: string): Promise<User> {
  const response = await fetch(`/api/users/${id}`)
  return response.json()
}

text

npm install next-mdx-remote
npm install gray-matter

Line Highlighting

You can highlight specific lines in code blocks using the {line-numbers} syntax:

text

function calculateTotal(items: Item[]) {
  // This line is highlighted
  const subtotal = items.reduce((sum, item) => sum + item.price, 0)
  // These lines are also highlighted
  const tax = subtotal * 0.1
  const total = subtotal + tax
  return total
}

Word Highlighting

You can also highlight specific words or phrases using the /word/ syntax:

text

const message = console.log(message) //"Hello, World!"//

Callouts

Use callouts to highlight important information:

Information

This is an informational callout. Use it to provide helpful context or additional details.

Warning

This is a warning callout. Use it to alert users about potential issues or important considerations.

Error

This is an error callout. Use it to highlight critical problems or things to avoid.

Success

This is a success callout. Use it to confirm successful operations or best practices.

Lists

Unordered Lists

First item
Second item
- Nested item 1
- Nested item 2
Third item

Ordered Lists

First step
Second step
1. Sub-step A
2. Sub-step B
Third step

Tables

Feature	Description	Status
MDX Support	Full MDX component support	✅ Enabled
Syntax Highlighting	Code highlighting with Shiki	✅ Enabled
Dark Mode	Theme toggle support	✅ Enabled
Search	Full-text search	🚧 Coming Soon

Blockquotes

This is a blockquote. Use it for quotes, important notes, or to highlight key takeaways from your documentation.

You can have multiple paragraphs in a blockquote.

Images

Images are automatically optimized and responsive:

Documentation Example

Horizontal Rules

You can use horizontal rules to separate sections:

Headings

Headings automatically get anchor links for easy sharing:

Level 3 Heading

Level 4 Heading

File Tree

Display project structure with files and folders:

src

app

layout.tsx

page.tsx

[...slug]

page.tsx

components

mdx

lib

docs.ts

mdx.ts

content

index.md

guides

package.json

tsconfig.json

Steps

Use steps to create sequential instructions with visual numbering:

Clone the repository

First, clone the repository to your local machine:

text

git clone https://github.com/username/docs-generator.git

Install dependencies

Navigate to the project directory and install dependencies:

text

cd docs-generator
npm install

Start development server

Run the development server:

text

npm run dev

Open http://localhost:3000 in your browser.

Tabs

Use tabs to organize related content like code examples for different package managers:

text

npm install next-mdx-remote

Math Equations

Our documentation supports mathematical equations using KaTeX syntax.

Inline Math

Use single dollar signs for inline equations: $E = mc^2$ and $a^2 + b^2 = c^2$ .

Block Math

Use double dollar signs for display equations:

\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

Complex Equations

\begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &= \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} &= 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} &= \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} &= 0 \end{aligned}

Diagrams with Mermaid

Create beautiful diagrams using Mermaid syntax. Diagrams automatically adapt to your theme (light/dark mode).

Flow Chart

Sequence Diagram

Class Diagram

Cards

Highlight features, links, or important information using cards.

Basic Cards

Getting Started

Learn the basics of setting up and using this documentation system.

Advanced Features

Explore advanced features like custom components and theming.

Cards with Links

Installation

Quick setup guide to get you started in minutes.

Learn more

Configuration

Customize your documentation to match your needs.

Learn more

Deployment

Deploy your documentation to production.

Learn more

Feature Cards

Fast Performance

Built with Next.js for optimal performance and SEO.

Full-text Search

Powerful search with FlexSearch for instant results.

Dark Mode

Beautiful light and dark themes with automatic switching.

MDX Support

Write content in Markdown with React components.

Tips for Using Components

Best Practices

Use callouts sparingly to maintain their impact
Choose the appropriate callout type for your message
Keep code examples concise and focused
Add descriptive titles to callouts when possible
Use tabs for alternative options (package managers, languages, etc.)
Use inline math for simple equations and block math for complex ones
Use Mermaid diagrams to visualize flows, architectures, and relationships
Use cards to highlight features or create visual navigation