Highlight
Highlight
Marker-style inline text highlight — simulates a real highlighter pen with yellow, blue, green, pink, or purple colours
Installation
npx @ravikumarsurya/mdx-ui 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 |