Annotation
Annotation
Inline text annotation with a click-to-reveal explanation popover
This algorithm runs in and . Click the underlined terms to learn more.
Installation
npx @ravikumarsurya/mdx-ui add annotationUsage
import { Annotation } from "@/components/mdx/annotation";
import { BigO, Pow } from "@/components/mdx/math-primitives";
<Annotation note="Quadratic time: for each element we scan all remaining elements.">
<BigO />(<Pow exp="2">n</Pow>)
</Annotation>;Examples
Basic annotation
Click the underlined text to reveal the explanation.
<Annotation note="A data structure that stores key-value pairs.">
hash map
</Annotation>Algorithm complexity
Use BigO, BigTheta, BigOmega from math-primitives for proper asymptotic notation.
import {
BigO,
BigTheta,
BigOmega,
Pow,
} from "@/components/mdx/math-primitives";
{
/* Upper bound */
}
<Annotation note="Worst case: visits every node once.">
<BigO />
(n)
</Annotation>;
{
/* Tight bound */
}
<Annotation note="Both upper and lower bound: merge sort always splits log n times.">
<BigTheta />
(n log n)
</Annotation>;
{
/* Quadratic */
}
<Annotation note="For each of n elements, we compare against all others — n × n operations.">
<BigO />(<Pow exp="2">n</Pow>)
</Annotation>;Technical term in prose
The chip uses{" "}
<Annotation note="One-Time Programmable: fuse bits written once and never changed.">
OTP
</Annotation>{" "}
fuses for secure key storage.Props
| Prop | Type | Default | Description |
|---|---|---|---|
note | string | — | The explanation shown in the popover (required) |
children | React.ReactNode | — | The inline text to annotate (required) |
className | string | — | Additional CSS classes |