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 annotation

Usage

page.mdx
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.

page.mdx
<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.

page.mdx
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

page.mdx
The chip uses{" "}
<Annotation note="One-Time Programmable: fuse bits written once and never changed.">
  OTP
</Annotation>{" "}
fuses for secure key storage.

Props

PropTypeDefaultDescription
notestringThe explanation shown in the popover (required)
childrenReact.ReactNodeThe inline text to annotate (required)
classNamestringAdditional CSS classes