MarkWords
Mark words in a paragraph by clicking or selecting text; [bracketed] words define correct answers
MarkWords renders a paragraph where users mark words. Words wrapped in [brackets] in the definition are the correct answers. Use the variant prop to switch between clickable words (default) and text-selection modes.
Import
import { MarkWords } from '@bside-tech/tbx-ui/components';Example
<MarkWords
text="And the vampire [Dracula] started chasing [Bram Stoker] around the house when the movie came out."
/>Props
Prop
Type
Variants
MarkWords supports three variants. Use the variant prop to choose how users mark words.
Button (default)
Every word is a clickable button. Users toggle words by clicking. This is the default behavior.
<MarkWords
text="And the vampire [Dracula] started chasing [Bram Stoker] around the house when the movie came out."
variant="button"
/>Highlight
Select text with the cursor to highlight it (like using a marker). Click highlighted text to remove the highlight. Powered by Lisere.
And the vampire Dracula started chasing Bram Stoker around the house when the movie came out.
<MarkWords
text="And the vampire [Dracula] started chasing [Bram Stoker] around the house when the movie came out."
variant="highlight"
/>Underline
Select text with the cursor to underline it. Click underlined text to remove it. Uses the same selection mechanism as the highlight variant.
And the vampire Dracula started chasing Bram Stoker around the house when the movie came out.
<MarkWords
text="And the vampire [Dracula] started chasing [Bram Stoker] around the house when the movie came out."
variant="underline"
/>Labels
Override labels via the labels prop. Supported keys: check, reset (action buttons), results (e.g. "correct" in "3 / 5 correct").
<MarkWords
text="..."
labels={{
check: 'Verify',
reset: 'Reset',
results: 'correct',
}}
/>Style
Tailwind v4 is available for all customisations. Pass classes via the classNames prop, or override CSS variables for fine-grained control.
CSS Classes
| Key | Element |
|---|---|
root | Root wrapper |
paragraph | Paragraph container |
word | Each clickable word button |
checkButton | Check button |
resetButton | Reset button |
result | Results text |
CSS Variables
Scoped under .tbx-markwords:
| Variable | Purpose |
|---|---|
--markwords-word-bg, --markwords-word-bg-hover, --markwords-word-bg-selected | Word button background (default, hover, selected). -selected uses color-mix with --exercise-accent-color. |
--markwords-word-border-selected | Word border when selected (uses --exercise-accent-color) |
--markwords-action-bg, --markwords-action-border | Check/Reset button background and border |
--markwords-result-neutral, --markwords-result-correct, --markwords-result-wrong | Results text colors (neutral, correct, wrong) |
--markwords-highlight-bg | Highlight variant background (uses color-mix with --exercise-accent-color) |
--markwords-underline-color | Underline variant color (uses --exercise-accent-color) |
--markwords-correct-bg, --markwords-correct-border | Correct answer highlight |
--markwords-wrong-bg, --markwords-wrong-border | Wrong answer highlight |
These feed into --exercise-action-bg, --exercise-action-border and --exercise-result-* used by ExerciseLayout.
Paragraph and word text use --exercise-layout-content-font-size.