{:html}` box is open by default | `true{:js}` |
I've added an insane amount of variants to this component for potentially any use case you could think of. For the more general ones, you can use the following:
| Variant | Usage |
| ------- | ----- |
| Note | For general information or comments that don't fit other categories |
| Tip | For helpful advice or shortcuts related to the topic at hand |
| Warning | For potential pitfalls or common misconceptions |
| Danger | For things that could potentially be destructive or harmful |
| Important | For things that are important to the reader's understanding |
For the potentially more academic/mathy folk, you can use the following. I've created specific variants that are tailor-made to be used alongside and/or nested into each other:
| Variant | Usage |
| ------- | ----- |
| Definition | For defining terms or concepts |
| Theorem | For important mathematical or logical statements that have been proven |
| Lemma | For helper theorems used in proving larger results |
| Proof | For logical arguments that establish the truth of a theorem or lemma |
| Corollary | For results that follow directly from theorems |
| Proposition | For important statements that are less significant than theorems |
| Axiom | For fundamental assumptions that are accepted without proof |
| Conjecture | For unproven statements believed to be true |
| Notation | For explaining mathematical notation |
| Remark | For additional comments or (potentially out-of-scope) observations |
| Intuition | For explaining the intuitive reasoning behind concepts |
| Recall | For reminding readers of previously covered material |
| Explanation | For providing deeper insights or clarifying complex topics |
| Example | For illustrating concepts with concrete examples or analogies |
| Exercise | For practice problems or take-home challenges for the reader |
| Problem | For presenting problems to be solved thoroughly |
| Answer | For providing simple, short answers to exercises or problems |
| Solution | For detailed solutions to exercises or problems |
| Summary | For summarizing key points or concepts |
## Generic callouts
These are what the generic callouts look like (of course, all the text is made up):
This tutorial assumes you're familiar with React hooks and the component lifecycle. If you need a refresher, check out the [official React documentation](https://reactjs.org/docs/hooks-intro.html) before proceeding.
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 |
This API is **not supported** in Internet Explorer and has limited support in older browsers. Make sure to include appropriate polyfills.
```js title="polyfill.js"
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.
Running this command will **permanently delete** all files in your current directory. Make sure to back up important data before proceeding.
```bash title="danger.sh"
# 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.
Version 2.0 introduces significant API changes. You'll need to update your existing code to use the new parameter structure.
1. The `configure(){:js}` method now returns a Promise
2. Authentication requires an API key object instead of a string
3. Event handlers use a new callback pattern
A migration example looks like the following:
```diff lang="js"
- 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:
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$.
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$.
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
$$
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.
Let $(f_n)$ be a sequence of non-negative measurable functions such that $f_n(x) \leq f_{n+1}(x)$ for all $n \in \mathbb{N}$ and almost all $x$. Define $f(x) = \lim_{n \to \infty} f_n(x)$. Then:
$$
\lim_{n \to \infty} \int f_n \, d\mu = \int f \, d\mu
$$
Let $g_n = f_n \cdot \chi_E$ where $E = \{x : f(x) < \infty\}$. By Fatou's lemma:
$$
\int f \, d\mu = \int \lim_{n \to \infty} g_n \, d\mu \leq \liminf_{n \to \infty} \int g_n \, d\mu = \liminf_{n \to \infty} \int f_n \, d\mu
$$
For the reverse inequality, note that $f_n \leq f$ for all $n$, so $\int f_n \, d\mu \leq \int f \, d\mu$. Taking the limit:
$$
\limsup_{n \to \infty} \int f_n \, d\mu \leq \int f \, d\mu
$$
Combining these inequalities:
$$
\int f \, d\mu \leq \liminf_{n \to \infty} \int f_n \, d\mu \leq \limsup_{n \to \infty} \int f_n \, d\mu \leq \int f \, d\mu
$$
Therefore, $\lim_{n \to \infty} \int f_n \, d\mu = \int f \, d\mu$.
I'll add this little subgenre of variant called "example-based" callouts that have more generally a question-answer format. For the "exercise-answer" pairing, the difference is that I'd recommend you default the answer to a closed state to hide the answer from any peeping readers until they've actually done the work themselves. Typically, the difference between an "Answer" and a "Solution" is that the answer basically just gives you the final answer, while the solution will show you the steps it takes to get to the answer:
Calculate the derivative of $f(x) = x^3 \sin(x)$ using the product rule.
$$
\frac{d}{dx}[x^3 \sin(x)] = 3x^2 \sin(x) + x^3 \cos(x)
$$
Prove that if a sequence $(a_n)$ converges to $L$, then the sequence of arithmetic means $(\frac{a_1 + a_2 + \ldots + a_n}{n})$ also converges to $L$.
Let $\varepsilon > 0$ be given. Since $(a_n)$ converges to $L$, there exists $N \in \mathbb{N}$ such that $|a_n - L| < \frac{\varepsilon}{2}$ for all $n \geq N$. Let $S_n = \frac{a_1 + a_2 + \ldots + a_n}{n}$ be the sequence of arithmetic means.
We can split $S_n$ as follows:
$$
S_n = \frac{a_1 + a_2 + \ldots + a_N + a_{N+1} + \ldots + a_n}{n}
$$
For $n > N$, we have:
$$
\begin{align*}
|S_n - L| &= \left|\frac{a_1 + a_2 + \ldots + a_n}{n} - L\right| \\
&= \left|\frac{a_1 + a_2 + \ldots + a_n - nL}{n}\right| \\
&= \left|\frac{(a_1 - L) + (a_2 - L) + \ldots + (a_n - L)}{n}\right| \\
&\leq \frac{|a_1 - L| + |a_2 - L| + \ldots + |a_N - L| + |a_{N+1} - L| + \ldots + |a_n - L|}{n}
\end{align*}
$$
Let $M = \max\{|a_1 - L|, |a_2 - L|, \ldots, |a_N - L|\}$. Then:
$$
|S_n - L| \leq \frac{NM + (n-N)\frac{\varepsilon}{2}}{n} = \frac{NM}{n} + \frac{n-N}{n} \cdot \frac{\varepsilon}{2}
$$
As $n \to \infty$, $\frac{NM}{n} \to 0$ and $\frac{n-N}{n} \to 1$. So for sufficiently large $n$, we have:
$$
|S_n - L| < \varepsilon
$$
Therefore, the sequence of arithmetic means converges to $L$.