Bylight

This example demonstrates how to create synchronized highlights across multiple elements using the Bylight library in Colight.

First, let's import the necessary libraries and define our sample text:

Use the Plot.bylight function to highlight specific words in our text:

Plot.bylight(rhyme, ["blue", "red", "Colors", "misled!"])

Animated Highlighting

We can create an animated version that highlights each word in sequence. Plot.Frames creates a reactive variable that we access via $state.frame. In this example we hide the slider.

Plot.Frames(
    [
        Plot.js("`frame: ${$state.frame}`") & Plot.bylight(rhyme, pattern)
        for pattern in rhyme.split()
    ],
    fps=2,
    slider=False,
)