> ## 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`
${components.Highlight({ attribute: "name", hit })}
${hit.description}
`;
},
},
});
```
## Options
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",
});
```
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.
The `hit` object must contain a `_highlightResult[attribute].value` property.
```js JavaScript icon=code theme={"system"}
components.Highlight({
// ...
hit: item,
});
```
The HTML element that wraps the highlight.
```js JavaScript icon=code theme={"system"}
components.Highlight({
// ...
highlightedTagName: "em",
});
```
The HTML element that wraps the non-highlighted parts of the string.
```js JavaScript icon=code theme={"system"}
components.Highlight({
// ...
nonHighlightedTagName: "div",
});
```
The character between each item when the attribute to highlight is an array.
```js JavaScript icon=code theme={"system"}
components.Highlight({
// ...
separator: " - ",
});
```
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"],
},
});
```
## HTML output
```html HTML icon=code-xml theme={"system"}
This is the highlighted text
```