Search code examples
pythonvoilaipyvuetify

highlighting text with ipyvuetify

I have to highligh texts using ipyvuetify being rendered with voila in a jupyter notebook.

In order to achieve that I start as follows:

import ipyvuetify as vue
pp=vue.Html(tag='mark',style_='font-weight: bold', children=['this is the first text highlighted green'], background_color='green')
pp2=vue.Html(tag='mark',style_='font-weight: bold', children=['this is a second text highlighted red'], background_color='red')
pp3=vue.Html(tag='p',style_='font-weight: bold', children=['blueblue'], background_color='blue')
display(pp,pp2,pp3)

this produces: enter image description here

But the desire result should be: enter image description here

Solution

  • ipyvuetify.Html does not an attribute 'background_color', nor 'color'. You can set the background-color via the 'style_' tag, just like you did for the bolding.

    import ipyvuetify as vue
pp=vue.Html(tag='mark',style_='font-weight: bold; background-color:green', children=['this is the first text highlighted green'])
pp2=vue.Html(tag='mark',style_='font-weight: bold; background-color:red', children=['this is a second text highlighted red'])
pp3=vue.Html(tag='p',style_='font-weight: bold; background-color:blue', children=['blueblue'])
display(pp,pp2,pp3)