Highlight
Marker-style inline text highlight — simulates a real highlighter pen with yellow, blue, green, pink, or purple colours
Use yellow for general emphasis, blue for technical terms, green for positive outcomes, pink for warnings, and purple for special concepts.
Installation
npx docsui-cli@latest add highlightUsage
Wrap any inline text with <Highlight>. Default colour is yellow.
React uses a <Highlight>unidirectional data flow</Highlight> model.
State updates are <Highlight color="blue">asynchronous</Highlight> by default.Examples
Use yellow for general emphasis, blue for technical terms, green for positive outcomes, pink for warnings, and purple for special concepts.
All colours
React uses a unidirectional data flow model.
State updates are asynchronous by default.
Never mutate state directly — always use setState.
Effects run after every render unless you pass a dependency array.
Use useMemo to avoid expensive recalculations.
Inside a paragraph
The <Highlight>virtual DOM</Highlight> is a lightweight copy of the real DOM.
React uses it to compute the <Highlight color="blue">minimal set of changes</Highlight> needed before updating the browser.The virtual DOM is a lightweight copy of the real DOM. React uses it to compute the minimal set of changes needed before updating the browser.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | "yellow" | "blue" | "green" | "pink" | "purple" | "yellow" | Highlight colour |
children | ReactNode | — | Content to highlight |
className | string | — | Extra classes |