A Bit Technical

MDX combines Markdown with embedded JavaScript and JSX, making it easy to build interactive content. Below are some examples.

Generic callouts

These are what the generic callouts look like (of course, all the text is made up):

Note (Prerequisites for advanced React development)

This tutorial assumes you’re familiar with React hooks and the component lifecycle. If you need a refresher, check out the official React documentation before proceeding.

Tip (Productivity enhancement)

You can quickly format your code by pressing Ctrl + Alt + F (Windows/Linux) or Cmd + Option + F (Mac).

Additional shortcuts include:

Action	Windows/Linux	Mac
Search	`Ctrl` + `F`	`Cmd` + `F`
Replace	`Ctrl` + `H`	`Cmd` + `H`
Save all	`Ctrl` + `Alt` + `S`	`Cmd` + `Option` + `S`

Warning (Cross-browser compatibility issues)

This API is not supported in Internet Explorer and has limited support in older browsers. Make sure to include appropriate polyfills.

if (!Object.fromEntries) {
  Object.fromEntries = function(entries) {
    const obj = {};
    for (const [key, value] of entries) {
      obj[key] = value;
    }
    return obj;
  };
}

See the Browser Compatibility Table for detailed information.

Danger (Critical data loss risk)

Running this command will permanently delete all files in your current directory. Make sure to back up important data before proceeding.

# This will delete everything in the current directory
rm -rf ./*
# Safer alternative with confirmation
rm -ri ./*

This operation cannot be undone and recovery tools may not be able to restore your data.

Important (Major API changes in v2.0)

Version 2.0 introduces significant API changes. You’ll need to update your existing code to use the new parameter structure.

The configure(){:js} method now returns a Promise
Authentication requires an API key object instead of a string
Event handlers use a new callback pattern

A migration example looks like the following:

app.configure("api-key-string");
await app.configure({ key: "api-key-string", version: "2.0" });

app.on('event', callback);
app.on('event', { handler: callback, options: { once: true } });

Mathematical callouts

Like I mentioned before, some of these variants are meant to be nested within each other. Take, for example, the following:

Definition (Continuous function)

A function $f: X \rightarrow Y$ between topological spaces is continuous if for every open set $V \subseteq Y$ , the preimage $f^{-1}(V) \subseteq X$ is open in $X$ .

Explanation (Equivalent formulations)

For metric spaces, continuity can be characterized by: $\forall \varepsilon > 0, \exists \delta > 0$ such that $d_X(x,y) < \delta \implies d_Y(f(x),f(y)) < \varepsilon$ . This captures the intuition that points close to each other in $X$ map to points close to each other in $Y$ .

Theorem (Law of Large Numbers)

Let $X_1, X_2, \ldots$ be a sequence of independent and identically distributed random variables with expected value $\mathbb{E}[X_i] = \mu < \infty$ . Then for any $\varepsilon > 0$ :

\lim_{n \to \infty} P\left(\left|\frac{1}{n}\sum_{i=1}^{n}X_i - \mu\right| > \varepsilon\right) = 0

Proof (Proof)

We’ll prove this using Chebyshev’s inequality. Let $S_n = \sum_{i=1}^{n}X_i$ and $\sigma^2 = \text{Var}(X_i)$ . By Chebyshev’s inequality:

P\left(\left|\frac{S_n}{n} - \mu\right| \geq \varepsilon\right) \leq \frac{\text{Var}(S_n/n)}{\varepsilon^2}

Since the variables are independent, we have:

\text{Var}(S_n/n) = \frac{\text{Var}(S_n)}{n^2} = \frac{n\sigma^2}{n^2} = \frac{\sigma^2}{n}

Substituting this into our inequality:

P\left(\left|\frac{S_n}{n} - \mu\right| \geq \varepsilon\right) \leq \frac{\sigma^2}{n\varepsilon^2}

As $n \to \infty$ , the right side approaches 0, which proves the theorem.

Using MDX

Generic callouts

Mathematical callouts