Highlighting Code

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

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

In [1]:

import genstudio.plot as Plot

rhyme = """Roses are blue,
Violets are red,
In this rhyme's hue,
Colors are misled!"""

import genstudio.plot as Plot rhyme = """Roses are blue, Violets are red, In this rhyme's hue, Colors are misled!"""

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

In [2]:

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

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

Out[2]:

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.

In [3]:

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

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

Out[3]: