[BUG] Cannot use span tag in markdown

[Batalex]

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

[alexcjohnson]

I can get this to have the desired effect if I wrap the whole thing in <p>:

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

This makes me think the issue is with the underlying react-markdown library we use (or perhaps for some reason this is expected behavior as far as react-markdown is concerned) rather than anything we could fix on the Dash side. Note that to interface with react-markdown we translate escapeHtml={!dangerously_allow_html}

[Batalex]

I don't know about that, this works as expected on the live demo. Other than that, dash-core-components includes "react-markdown": "^4.0.6", so it should cover up to the latest 4.2.2 release. Anyway, thanks for the <p> tip !

[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!

[eddy-geek]

I confirm that:

• The issue is still valid with dash 1.10
• Wrapping <span> in <p> still works
• Also, within tags, markdown is not recognized (as in react-markdown 'raw' HTML mode -- there is no option to "mix" Markdown within html )

[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.

[amrohendawi]

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

Give this a try. This syntax modification always fixes issues with embedding html in markdown.

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

Thumbs up if it helped you

[amrohendawi]

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.

Yes you can.

The general rule is, you need to convert any html element from

<tag>some text</tag>

to

<tag children="some text" />

I hope this helps.