Highlight

Highlight is used to highlight subsets of text.

default

Using the Highlight component to emphasize content

import Heading from "@/components/ui/Heading";

export default function Page() {
  return (
     <Highlight query="emphasize">
       Using the Highlight component to emphasize content
     </Highlight>
  )
}

multiple

Using the Highlight component to emphasize content

import Heading from "@/components/ui/Heading";

export default function Page() {
  return (
     <Highlight query={['component', 'emphasize']}>
       Using the Highlight component to emphasize content
     </Highlight>
  )
}

custom highlight style

Using the Highlight component to emphasize content

import Heading from "@/components/ui/Heading";

export default function Page() {
  return (
    <Highlight query="emphasize" highlightClassName="italic bg-primary">
      Using the Highlight component to emphasize content
    </Highlight>
  )
}