MDX Demo

This is a demo of MDX rendering on my site. MDX allows you to use React components in your Markdown!

Interactive Components

Here’s a simple counter component:

Count: 0

+1-1Reset

Math Support

MDX also supports math equations:

Inline math: $E = mc^2$

Block math:

$$\frac{d}{dx}e^x = e^x$$

Code Highlighting

JavaScript

function hello() {
  console.log("Hello, world!");
  
  // This is a comment
  const greeting = "Hello";
  const name = "World";
  
  return `${greeting}, ${name}!`;
}

TypeScript

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

function getUser(id: number): Promise<User> {
  return fetch(`/api/users/${id}`)
    .then(response => {
      if (!response.ok) {
        throw new Error('User not found');
      }
      return response.json();
    });
}

Python

def fibonacci(n):
    """Generate the Fibonacci sequence up to n"""
    a, b = 0, 1
    while a < n:
        yield a
        a, b = b, a + b
        
# Example usage
for num in fibonacci(100):
    print(num)

CSS

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

@media (max-width: 768px) {
  .container {
    padding: 1rem;
  }
}

Tables

Name	Age	Occupation
John	30	Developer
Jane	25	Designer

Images

You can use Next.js Image component in your MDX files (once properly set up).

Links

Visit my homepage

Lists

• Item 1
• Item 2
  • Nested item 1
  • Nested item 2
• Item 3

1. First item
2. Second item
3. Third item

Blockquotes

This is a blockquote.

It can span multiple lines.

Callouts

Here are examples of the different types of callouts available:

Horizontal Rule

---

Colored Text Test

This is red text and blue text.

Text Shadows

This is shadowed text.

Gradient Text

This is gradient text.

Highlighted Text

This is highlighted text.

Rotated Text

This is rotated text.

Text With Borders

This is text with borders.

Outlined Text

This is outlined text.

Animated Text

This is animated text.

Wavy Strikethrough

This is wavy strikethrough text.

Blurred Text

This is blurred text.

Vertical Text

This is vertical text.

Glowing Text

This is glowing text.

Super/Subscript

This is superscript (H²O) and subscript (CO₂).

Horizontal Rules

---

Emphasis

This is bold text

This is bold text

This is italic text

This is italic text

Strikethrough

Blockquotes

Blockquotes can also be nested…

…by using additional greater-than signs right next to each other…

…or with spaces between arrows.

Lists

Unordered

• Create a list by starting a line with +, -, or *
• Sub-lists are made by indenting 2 spaces:
  • Marker character change forces new list start:
    • Ac tristique libero volutpat at
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
• Very easy!

Ordered

1. Lorem ipsum dolor sit amet

2. Consectetur adipiscing elit

3. Integer molestie lorem at massa

4. You can use sequential numbers…

5. …or keep all the numbers as 1.

Start numbering with offset:

57. foo
58. bar

Code

Inline code

Indented code

// Some comments line 1 of code line 2 of code line 3 of code

Block code “fences”

Sample text here...

Syntax highlighting

var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

Latex

Inline Latex

Inline Latex is rendered inline with the text. $E = mc^2$

Block Latex

Block Latex is rendered as a block of text.

$$\int_0^\infty \frac{x^3}{e^x} \, dx = \frac{\pi^4}{15}$$ $$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$ $$\frac{1}{2\pi i} \oint_C \frac{f(z)}{z-z_0} \, dz$$ $$\lim_{x \to 0} \frac{\sin x}{x} = 1$$

Fractions

$$\frac{\frac{1}{x} + \frac{1}{y}}{y-z}$$ $$\frac{1}{\frac{1}{x} + \frac{1}{y}}$$

Quadratic Formula

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

Matrices

$$\begin{pmatrix} a & b \\ c & d \end{pmatrix}$$

Arrays

$$\begin{array}{c|c|c} a & b & c \\ \hline d & e & f \\ \end{array}$$

Tables

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Right aligned columns

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Links

link text

link with title

Autoconverted link https://github.com/nodeca/pica (enable linkify to see)

Images

Like links, Images also have a footnote style syntax

With a reference later in the document defining the URL location: