> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Highlight

> Visually highlights matched terms in search results.

```ts Signature theme={"system"}
components.Highlight({
  attribute: string,
  hit: object,
  // Optional parameters
  highlightedTagName?: string,
  nonHighlightedTagName?: string,
  separator?: string,
  cssClasses?: object,
});
```

## About this widget

Displays the [highlighted attributes](/doc/guides/building-search-ui/ui-and-ux-patterns/highlighting-snippeting/js)
of your search results.
It isn't a widget but a component available from the [`hits`](/doc/api-reference/widgets/hits/js)
or [`infiniteHits`](/doc/api-reference/widgets/infinite-hits/js) widgets templates.

## Examples

```js JavaScript icon=code theme={"system"}
hits({
  container: "#hits",
  templates: {
    item(hit, { html, components }) {
      return html`
        <h2>${components.Highlight({ attribute: "name", hit })}</h2>
        <p>${hit.description}</p>
      `;
    },
  },
});
```

## Options

<ParamField body="attribute" type="string" required>
  The highlighted attribute.

  Specify a dot-separated value for nested objects, like `actor.name`

  ```js JavaScript icon=code theme={"system"}
  components.Highlight({
    // ...
    attribute: "actor.name",
  });
  ```
</ParamField>

<ParamField body="hit" type="object" required>
  The original [`hit` object](/doc/guides/building-search-ui/going-further/backend-search/in-depth/understanding-the-api-response#hits)
  provided to the function.
  It contains all the data for that result, including the highlighted parts.

  <Note>The `hit` object must contain a `_highlightResult[attribute].value` property.</Note>

  ```js JavaScript icon=code theme={"system"}
  components.Highlight({
    // ...
    hit: item,
  });
  ```
</ParamField>

<ParamField body="highlightedTagName" type="string" default="mark">
  The HTML element that wraps the highlight.

  ```js JavaScript icon=code theme={"system"}
  components.Highlight({
    // ...
    highlightedTagName: "em",
  });
  ```
</ParamField>

<ParamField body="nonHighlightedTagName" type="string" default="span">
  The HTML element that wraps the non-highlighted parts of the string.

  ```js JavaScript icon=code theme={"system"}
  components.Highlight({
    // ...
    nonHighlightedTagName: "div",
  });
  ```
</ParamField>

<ParamField body="separator" type="string" default=", ">
  The character between each item when the attribute to highlight is an array.

  ```js JavaScript icon=code theme={"system"}
  components.Highlight({
    // ...
    separator: " - ",
  });
  ```
</ParamField>

<ParamField body="cssClasses" type="object" default="{}">
  The [CSS classes you can override](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/js#style-your-widgets):

  * `root`. The component's root element.
  * `highlighted`. The highlighted parts.
  * `nonHighlighted`. The non-highlighted parts.
  * `separator`. The separator elements between highlighted parts.

  ```js JavaScript icon=code theme={"system"}
  components.Highlight({
    // ...
    cssClasses: {
      root: "MyCustomHighlight",
      highlighted: ["MyCustomHighlightPart", "MyCustomHighlightPart--subclass"],
    },
  });
  ```
</ParamField>

## HTML output

```html HTML icon=code-xml theme={"system"}
<span>This is the <mark class="ais-Highlight-highlighted">highlighted text</mark></span>
```