dcc.Markdown styling

Dash Python
1

I’m using dcc.Markdown and the styling is not applied for header (#).
here is the output:

image
image945×229 24.7 KB

Here is the markdown body:

notes = '''# Household spending on entertainment
In the **Eastern region**, the average Household spending on entertainment is **750**. The lowest recorded value was in **Qaryah alulya** in the year **2019**, with a value of **250**, and the highest recorded value was in **Qaryah alulya** in the year **2017**, with a value of **1250**
You can explore more data if you scroll down.
'''

and here is the code to add markdown:

dcc.Markdown(notes, className='text-white')
2

Hi @mo_taweel, try using the style parameter:

 dcc.Markdown(notes, style={'color': 'white', 'background-color': 'darkblue'})
2 Likes
3

Maybe you can turn to use my markdown render components library fmc ( GitHub - CNFeffery/feffery-markdown-components: Better markdown render component in Plotly Dash. ), which supports precise style control over various parts of markdown content, for example:

PS: pip install feffery-markdown-components , related document address: feffery-markdown-components在线文档

image
image1078×960 23.9 KB 

import dash
from dash import html
import feffery_markdown_components as fmc

app = dash.Dash(__name__)

notes = '''
# Household spending on entertainment
## Level2 title demo
### Level3 title demo
In the **Eastern region**, the average Household spending on entertainment is **750**. The lowest recorded value was in **Qaryah alulya** in the year **2019**, with a value of **250**, and the highest recorded value was in **Qaryah alulya** in the year **2017**, with a value of **1250**
You can explore more data if you scroll down.
'''

app.layout = html.Div(
    [
        fmc.FefferyMarkdown(
            markdownStr=notes,
            h1Style={
                'color': '#3bc9db'
            },
            h2Style={
                'color': '#9775fa'
            },
            h3Style={
                'color': '#51cf66'
            },
            strongStyle={
                'color': '#fcc419'
            },
            style={
                'background': '#0b253e',
                'color': 'white',
                'padding': 25
            }
        )
    ],
    style={
        'padding': 100
    }
)

if __name__ == '__main__':
    app.run(debug=True)
4 Likes
4

Hi @mo_taweel !

If you still want to use your CSS class, I suspect your CSS file is not in an “assets” folder at the root of your app. It is the default folder where Dash will look for assets, you can customize the path with the parameter assets_url_path in Dash() when creating your app (app = dash.Dash())

Second possibility, you didn’t provide __name__ in app = dash.Dash(__name__)

For more info, take a look here:

1 Like
5

I’ve used this solution, but I want to know the reason that the heading color is formatted this way when I have used the default dcc.Markdown