[BUG] Cannot use span tag in markdown

Describe your context Please provide us your environment so we can easily reproduce the issue.

• replace the result of pip list | grep dash below

dash==1.3.1
dash-core-components==1.2.1
dash-html-components==1.0.1
dash-renderer==1.1.0
dash-table==4.3.0

Describe the bug

Html should be valid markdown, however I cannot use span tags to change the font color for example.

Here is an example:

dcc.Markdown(["foo <span style='color:red'>bar</span>"], dangerously_allow_html=True)

which is rendered like this

<p>foo <span><span style="color:red"></span></span>bar<span></span></p>

Expected behavior

“bar” should be enclosed in my defined span tag.

Edit: typo

[codytodonnell]

Any movement on this? Can confirm that this problem still exists in dash 1.20

You cannot embed html inside dcc.Markdown if there are attributes on the html element.

[alexcjohnson]

hmm OK, I have to say I’m stumped. Our package-lock was holding us at 4.0.6, but bumping to 4.2.2 didn’t change this behavior. So at this point I can put what looks like identical props (with the exception of one plugin and a special renderer for code blocks, that the demo uses) into react-markdown via dcc.Markdown and the live demo, and the results are different. Not sure where to go from here but I’m open to suggestions.

Regardless, thanks for bringing this up!