# tableberg/1.1.5/src/components/HighlightedText.tsx

Tableberg – Simple Gutenberg Table Block, version 1.1.5. 36 lines.

- Page: https://pluginprobe.com/plugins/tableberg/1.1.5/code/src/components/HighlightedText.tsx
- Raw: https://pluginprobe.com/plugins/tableberg/1.1.5/raw/src/components/HighlightedText.tsx
- Modified: 2026-09-16T03:30:32+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/tableberg/1.1.5/code/src/components/HighlightedText.tsx#L10-L20`.

```tsx
import { getHighlightSegments } from "../search";

interface HighlightedTextProps {
    content: string;
    searchTerm: string;
    highlightColor: string;
}

export function HighlightedText({
    content,
    searchTerm,
    highlightColor,
}: HighlightedTextProps) {
    const segments = getHighlightSegments(content, searchTerm);

    return (
        <>
            {segments.map((segment, index) =>
                segment.highlighted ? (
                    <mark
                        key={index}
                        style={{
                            backgroundColor: highlightColor,
                            borderRadius: "2px",
                        }}
                    >
                        {segment.text}
                    </mark>
                ) : (
                    segment.text
                )
            )}
        </>
    );
}

```