Markdown component doesn't render html tags

Dash Python
1

Hello,

I’m currently trying to change the text color in a Markdown component. Since Markdown is compatible with HTML, I’m using the <font> tag.

Here’s the tiniest reproducible example I can think of:

import dash

app = dash.Dash()
app.layout = dcc.Markdown('''<font color="red">Am I red yet?</font>''')
app.run_server(debug=True)

The rendering inside my browser is:

<font color="red">Am I red yet?</font>

I’ve tried with other tags and it seems they are considered as plain text instead of tags. Is this behavior for security reasons?

Thanks!

2

did you ever figure out a solution to this?
I have a similar usecase where I’d like to invoke some simple HTML inside of the markdown block, and it’s impractical to close/reopen dcc.Markdown just to do that.

I wonder if this would cause an issue though with the desire to avoid ‘no raw html’?

3

I am also looking for ways to change style inside dcc.Markdown but that’s probably not available now. The code below can change the colour.

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div(dcc.Markdown('''Am I red yet?'''), style={'color':'red'})
app.run_server(debug=True)
1 Like
4

Hi all,
I’m also bothered by how to partial use color use to emphasize words
The solution is quite simple: use html all round the children in the dcc.Markdown component with the argument dangerously_allow_html=True

Noted that it seems that dangerously_allow_html has some secure issues, but I’m not familiar with them

Here is the example:

from dash import dcc, html
import dash

app = dash.Dash(__name__)

app.layout = html.Div(
  children=dcc.Markdown(
    '''
    <p style="margin: 0"> Hello, these some testing colorful words:</p>
    <p style="margin: 0"> I am <span style="color: red">red</span>.</p>
    <p style="margin: 0"> I am <span style="color: orange">orange</span>.</p>
    <p style="margin: 0"> I am <span style="color: yellow">yellow</span>.</p>
    <p style="margin: 0"> I am <span style="color: green">green</span>.</p>
    <p style="margin: 0"> I am <span style="color: blue">blue</span>.</p>
    <p style="margin: 0"> I am <span style="color: purple">purple</span>.</p>
    '''
    ,dangerously_allow_html=True)
)

if __name__ == '__main__':
  app.run_server(debug=True)
5

Also faced an issue that using <span style="color: red">Hey you</span> doesn’t render a tag for me. Found a solution here.

Quick answer: surrounding your text block with <p> tag solves the issue, but disallows using any markdown formatting like **bold** or _italic_.
Alternative is to use <span style="color: red" children="Hey you" /> at any place - this doesn’t break other formatting.