MDX Component Showcase

Introduction

This post showcases every custom MDX component available in Prism. Authors can use these components to create richer, more interactive content beyond standard markdown.

Code Blocks

The CodeBlock component provides syntax-highlighted code with a filename header, language label, line highlighting, and a copy button.

TypeScript Example

interface BlogPost {
title: string;
date: Date;
tags: string[];
}

function sortByDate(posts: BlogPost[]): BlogPost[] {
return [...posts].sort(
(a, b) => b.date.getTime() - a.date.getTime()
);
}

export { sortByDate };

Python Example

import subprocess
from pathlib import Path

def build_static_site(output_dir: Path) -> None:
"""Build the Astro site to a static output directory."""
subprocess.run(
["npm", "run", "build"],
check=True,
env={"OUTPUT_DIR": str(output_dir)},
)
print(f"Build complete: {output_dir}")

CSS Example

:root {
--color-bg: #ffffff;
--color-text: #1a1a2e;
--color-accent: #6366f1;
}

.dark {
--color-bg: #0f0f1a;
--color-text: #e4e4e7;
--color-accent: #818cf8;
}

Callouts

Callouts are admonition boxes that draw attention to important information. There are four types: info, warning, error, and tip.

Tabs

The Tabs component lets you organize content into switchable panels, great for showing code in multiple languages or comparing approaches.

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

console.log(greet("World"));

def greet(name: str) -> str:
    return f"Hello, {name}!"

print(greet("World"))

package main

import "fmt"

func greet(name string) string {
    return fmt.Sprintf("Hello, %s!", name)
}

func main() {
    fmt.Println(greet("World"))
}

Video Embeds

The VideoEmbed component provides a responsive, accessible wrapper for embedded videos.

Mixing Components with Markdown

These components work seamlessly alongside standard markdown. You can use regular markdown features like bold text, italics, links, and lists:

• First item in a list
• Second item with inline code
• Third item

Inline Code and Blocks

Standard fenced code blocks still work as expected:

const message = "Standard fenced code blocks work too!";
console.log(message);

Use the CodeBlock component when you need features like filename headers or line highlighting that go beyond what fenced code blocks provide.

Summary

These components give authors a toolkit for creating engaging technical content: