# dcc.Markdown dangerously\_allow\_html inline styling

**URL:** <https://community.plotly.com/t/dcc-markdown-dangerously-allow-html-inline-styling/43248>\
**Category:** Dash Python\
**Created:** [July 31, 2020, 8:33pm UTC](https://community.plotly.com/t/dcc-markdown-dangerously-allow-html-inline-styling/43248 "2020-07-31T20:33:59Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ianjohnston](https://avatars.discourse-cdn.com/v4/letter/i/76d3ee/32.png) [@ianjohnston](https://community.plotly.com/u/ianjohnston)\
**Post date:** [July 31, 2020, 8:33pm UTC](https://community.plotly.com/t/dcc-markdown-dangerously-allow-html-inline-styling/43248/1 "2020-07-31T20:33:59Z")

</div>

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.

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

```

works but

```auto
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

```auto
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

---

<div class="post-metadata">

**Author:** ![amrohendawi](https://avatars.discourse-cdn.com/v4/letter/a/f0a364/32.png) [@amrohendawi](https://community.plotly.com/u/amrohendawi)\
**Post date:** [August 19, 2022, 3:26pm UTC](https://community.plotly.com/t/dcc-markdown-dangerously-allow-html-inline-styling/43248/2 "2022-08-19T15:26:29Z")

</div>

Instead of

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

```

Try

```auto
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

```auto
<tag>some text</tag> 

```

to

```auto
<tag children="some text" /> 

```

I hope this fixes your issue.
