Black Lives Matter. Please consider donating to Black Girls Code today.

dcc.Markdown dangerously_allow_html inline styling

Hello, I am trying to figure out a way to highlight dynamically within a dcc.Markdown component. I have a call back set up to replace the children property of the markdown component with selected words from a dropdown surrounded by the tag.

The callback works and I can parse the words and filter them just fine, however when selecting more than one, I’d like to differentiate the different words with different colors

I understand that exposing the raw html opens security concerns, but this is an internal dashboard only accessed by me not a live exposed server.

dcc.Markdown(dangerously_allow_html=True, children='''This should be <mark>highlighted</mark>''')

works but

dcc.Markdown(dangerously_allow_html=True, children='''This should be <mark style="background-color:blue">highlighted</mark>''')

doesn’t seem to correctly apply the tag. Neither does

dcc.Markdown(dangerously_allow_html=True, children='''This should be <mark id="highlight1">highlighted</mark>''')

I’m not sure if the issue is the space in the raw html tag or the double quotes thats throwing it off, but I’m not able to have multiple words selected with different colors.

It looks like I’m using Dash 1.13.3