<Highlight>
  {children}
</Highlight>

<Highlight term="world">
  Hello world! How are you doing today?
</Highlight>

const results = ['Apple Pie', 'Orange Juice', 'Grape Soda']
const searchTerm = 'ap'

return (
  <ul>
    {results.map((result) => (
      <li key={result}>
        <Highlight term={searchTerm}>{result}</Highlight>
      </li>
    ))}
  </ul>
)

<Highlight term="important">
  This is a very important message.
</Highlight>

// With custom mark styling:
<Mark className="bg-warning-bg text-warning-text">
  Important text
</Mark>

const items = [
  'Documentation',
  'Components',
  'Examples',
  'Tutorials',
  'API Reference'
]
const searchTerm = 'doc'

return (
  <ul className="space-y-2">
    {items.map((item) => (
      <li key={item} className="px-4 py-2 rounded hover:bg-bg-hover">
        <Highlight term={searchTerm}>{item}</Highlight>
      </li>
    ))}
  </ul>
)