The highlight component take in a string and display some of the words as highlighted text.

The words to highlight can be selected using the query prop.

You can also customize how the hightlight will be rendered with the styles prop.

Hello World, we have some highlight
rc.highlight(
    "Hello World, we have some highlight",
    query=["World", "some"],
    styles={
        "px": "2",
        "py": "1",
        "rounded": "full",
        "bg": "grey",
    },
)

rc.Highlight

Highlights a specific part of a string.

PropType | ValuesDefault
query
List
styles
Dict[Any, Any]

Event Triggers

See the full list of default event triggers