## Highlight  
Use the Highlight component to highlight a substring in a given string with mark tag.  
Category: Typography  

### Simple Example

Use Highlight component to highlight a substring in a given string with a mark tag.

Pass the main string as children to Highlight component and string part that should be highlighted to `highlight` prop. 
If the main string does not include `highlight` part, it will be ignored. 
`Highlight` ignores trailing whitespace and highlights all matched characters sequences.

```python
import dash_mantine_components as dmc

component = dmc.Highlight(
    "Highlight this, definitely this and also this!", highlight="this"
)
```
### Change highlight styles

```python
import dash_mantine_components as dmc

component = dmc.Highlight(
    "You can change styles of highlighted part if you do not like default styles",
    ta="center",
    highlight=["highlighted", "default"],
    highlightStyles={
        "backgroundImage": "linear-gradient(45deg, var(--mantine-color-cyan-5), var(--mantine-color-indigo-5))",
        "fontWeight": 500,
        "WebkitBackgroundClip": "text",
        "WebkitTextFillColor": "transparent",
    },
)
```
### Colors

You can customize the highlight color with the `color` prop from one of colors in Mantine's theme.

```python
import dash_mantine_components as dmc

component = dmc.Highlight(
    "Highlight this, definitely this and also this!",
    highlight="this",
    color="lime",
)
```

### Highlight Multiple Strings

To highlight multiple substrings, provide an array of values.

```python
import dash_mantine_components as dmc

component = dmc.Highlight(
    "Highlight this, definitely this and also that!", highlight=["this", "that"]
)
```
### Text Props

Highlight component supports same props as Text component.

```python
import dash_mantine_components as dmc

component = dmc.Highlight(
    "Highlight this, definitely this and also this!",
    highlight="this",
    size="lg",
    c="green",
    color="yellow",
    ta="center",
)
```
### Styles API



This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


| Name | Static selector         | Description  |
|:-----|:------------------------|:-------------|
| root | .mantine-Highlight-root | Root element |


### Keyword Arguments
#### Highlight

- children (string; optional):
    Content.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- color (optional):
    Key of `theme.colors` or any valid CSS color, passed to `Mark`
    component `color` prop, `yellow` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- gradient (dict; optional):
    Gradient configuration, ignored when `variant` is not `gradient`,
    `theme.defaultGradient` by default.

    `gradient` is a dict with keys:

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- highlight (string | list of strings; required):
    Substring or an array of substrings to highlight in `children`.

- highlightStyles (dict; optional):
    Styles applied to `mark` elements.  Note CSS properties are
    camelCase,  for example `highlightStyles={"backgroundColor":
    "blue"}`.

    `highlightStyles` is a dict with keys:

- inherit (boolean; optional):
    Determines whether font properties should be inherited from the
    parent, `False` by default.

- inline (boolean; optional):
    Sets `line-height` to 1 for centering, `False` by default.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- lineClamp (number; optional):
    Number of lines after which Text will be truncated.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- size (optional):
    Controls `font-size` and `line-height`, `'md'` by default.

- span (boolean; optional):
    Shorthand for `component="span"`, `False` by default, default
    root element is `p`.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- truncate (boolean; optional):
    Side on which Text must be truncated, if `True`, text is truncated
    from the start.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.