> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.
# ReverseHighlight
> Visually highlights the non-matching parts in search results.
```ts Signature theme={"system"}
components.ReverseHighlight({
attribute: string,
hit: object,
// Optional parameters
highlightedTagName?: string,
nonHighlightedTagName?: string,
separator?: string,
cssClasses?: object,
});
```
## About this widget
The `reverseHighlight` function returns any attribute from a hit into its highlighted form, when relevant.
The function leverages the [highlighting feature of Algolia](/doc/guides/building-search-ui/ui-and-ux-patterns/highlighting-snippeting/js)
and is designed to work with the [`hits`](/doc/api-reference/widgets/hits/js)
or [`infiniteHits`](/doc/api-reference/widgets/infinite-hits/js) widget.
## Examples
```js JavaScript icon=code theme={"system"}
hits({
container: "#hits",
templates: {
item(hit, { html, components }) {
return html`
${components.ReverseHighlight({ attribute: "name", hit })}
${hit.description}
`;
},
},
});
```
## Options
The attribute of the record to highlight. You can give a dot-separated value for deeply nested objects, like `actor.name`.
```js JavaScript icon=code theme={"system"}
components.ReverseHighlight({
// ...
attribute: "actor.name",
});
```
The original `hit` object provided to the function.
The value is already bound to the function inside a string template,
so you don't have to provide it.
For this to work, the provided object must have a `_highlightResult[attribute].value` property.
```js JavaScript icon=code theme={"system"}
components.ReverseHighlight({
// ...
hit: item,
});
```
The name of the HTML element to wrap the highlighted parts of the string.
```js JavaScript icon=code theme={"system"}
components.ReverseHighlight({
// ...
highlightedTagName: "em",
});
```
The HTML element that wraps the non-highlighted parts of the string.
```js JavaScript icon=code theme={"system"}
components.ReverseHighlight({
// ...
nonHighlightedTagName: "div",
});
```
The character between each item when the attribute to highlight is an array.
```js JavaScript icon=code theme={"system"}
components.ReverseHighlight({
// ...
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.ReverseHighlight({
// ...
cssClasses: {
root: "MyCustomReverseHighlight",
highlighted: [
"MyCustomReverseHighlightPart",
"MyCustomReverseHighlightPart--subclass",
],
},
});
```
## HTML output
```html HTML icon=code-xml theme={"system"}
This is the highlighted text
```