dcc.Markdown dangerously_allow_html inline styling

Dash Python
1

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

2

Instead of

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

Try

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

So, basically you need to change any html tag from

<tag>some text</tag>

to

<tag children="some text" />

I hope this fixes your issue.