annotate

Annotate

Code with numbered notes. Put `// (1)` at the end of a line in the fence, then explain it in an ordered list. Marked lines stay bright; the rest recede. A shell session is Terminal.

mdx-components

End a line with `// (1)`. The ordered list under the fence explains it. Marked lines stay bright; the rest recede.

[ mdx-components.tsx ]

[1]import { withMdxcn } from "@/registry/default/mdx/mdx" import { GraphTimeline } from "@/registry/default/graph-timeline/graph-timeline"   export function useMDXComponents(components) {[2]  return withMdxcn({ ...components, GraphTimeline }) }

Runs on the server. The file has no "use client".
Your overrides stay. A swapped tag still reads as that tag.

MDX

<Annotate title="mdx-components.tsx">

```tsx
import { withMdxcn } from "@/registry/default/mdx/mdx" // (1)
import { GraphTimeline } from "@/registry/default/graph-timeline/graph-timeline"

export function useMDXComponents(components) {
  return withMdxcn({ ...components, GraphTimeline }) // (2)
}
```

1. Runs on the server. The file has no "use client".
2. Your overrides stay. A swapped tag still reads as that tag.

</Annotate>

install

command

retry

`# (1)` works for Python, shell, and YAML.

[ python ]

[1]def fetch(url, times=3):     for attempt in range(times):         try:             return get(url)[2]        except TimeoutError:             sleep(2 ** attempt)     raise

Three tries. Enough for a flaky network, not for a service that is down.
Only timeouts retry. A 500 fails fast.

MDX

<Annotate>

```python
def fetch(url, times=3):  # (1)
    for attempt in range(times):
        try:
            return get(url)
        except TimeoutError:  # (2)
            sleep(2 ** attempt)
    raise
```

1. Three tries. Enough for a flaky network, not for a service that is down.
2. Only timeouts retry. A 500 fails fast.

</Annotate>

[ PROPS ]

Prop	Type	Default	Description

title	string	—	Defaults to the fence language, or code.
children	Markdown	—	A fenced block with `// (1)`, `# (1)`, or `<!-- (1) -->` markers, then an ordered list. Item 1 explains (1).
code	string	—	Data form of the fence.
notes	ReactNode[]	—	Data form of the list.
palette	"mono" \| "duo" \| "multi"	"mono"	mono is one accent plus muted. duo paints the second series with --graph-accent-2. multi cycles three accents.
corner	string	"+"	Character at each corner of the frame.
className	string	—	Passed to the outer frame.