Stylize markdown using a callback function

Hi

I am trying to stylize markdown using a callback.

I want the output to be in bold. However, when I run this code I get it like this

import dash
import dash_html_components as html
import dash_core_components as dcc
from datetime import datetime as dt

# initialize the application
app = dash.Dash()

# define the layout of the app
app.layout = html.Div([

    # add a date range selector
    dcc.DatePickerRange(
        id = 'my-date-picker-range',
        min_date_allowed = dt(2010,1,4),
        max_date_allowed = dt(2020, 12, 31),
        initial_visible_month = dt(2020, 5, 23)
    ),

    html.Div(id = 'output-container-date-picker-range'),
])

@app.callback(
    dash.dependencies.Output('output-container-date-picker-range', 'children'),
    [dash.dependencies.Input('my-date-picker-range', 'start_date'),
     dash.dependencies.Input('my-date-picker-range', 'end_date')])
def update_output_div(start_date, end_date):
    return f"**This report covers the time period spanning {start_date} to {end_date}**"

app.run_server(debug = False)

Hi @shiman wellcome to Dash community

You need to use dcc.Markdown, and instead of passing the text with " " you need to use ’ ’ '

This is your code working:

import dash
import dash_html_components as html
import dash_core_components as dcc
from datetime import datetime as dt

# initialize the application
app = dash.Dash()

# define the layout of the app
app.layout = html.Div([

    # add a date range selector
    dcc.DatePickerRange(
        id = 'my-date-picker-range',
        min_date_allowed = dt(2010,1,4),
        max_date_allowed = dt(2020, 12, 31),
        initial_visible_month = dt(2020, 5, 23)
    ),

    html.Div(
        dcc.Markdown(id = 'output-container-date-picker-range')
    ),
])

@app.callback(
    dash.dependencies.Output('output-container-date-picker-range', 'children'),
    [dash.dependencies.Input('my-date-picker-range', 'start_date'),
     dash.dependencies.Input('my-date-picker-range', 'end_date')])
def update_output_div(start_date, end_date):
    return f'''**This report covers the time period spanning {start_date} to {end_date}**'''

app.run_server(debug = False)

See this:
https://dash.plotly.com/dash-core-components/markdown

1 Like

Thanks much. It worked

1 Like

Hi

Though your solution works. When I try to use it with bootstrap themes, all the formatting related to bold text disappears. Is there a way around this?

import dash
import dash_html_components as html
import dash_core_components as dcc
from datetime import datetime as dt
import dash_bootstrap_components as dbc

# initialize the application
external_stylesheets = [dbc.themes.LUX]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


# define the layout of the app
app.layout = html.Div([

    # add a date range selector
    dcc.DatePickerRange(
        id = 'my-date-picker-range',
        min_date_allowed = dt(2010,1,4),
        max_date_allowed = dt(2020, 12, 31),
        initial_visible_month = dt(2020, 5, 23)
    ),

    html.Div(
        dcc.Markdown(id = 'output-container-date-picker-range')
    ),
])

@app.callback(
    dash.dependencies.Output('output-container-date-picker-range', 'children'),
    [dash.dependencies.Input('my-date-picker-range', 'start_date'),
     dash.dependencies.Input('my-date-picker-range', 'end_date')])
def update_output_div(start_date, end_date):
    return '''This **report** covers the time period spanning **{} to {}**'''.format(start_date,end_date)

app.run_server(debug = False)

Sorry :woozy_face: I can’t help.

I do not understand why boostrap is canceling the dcc.Marckdown.

Perhaps @tcbagley can help you.

Hi @shiman

I ran the code you posted and it worked. :slight_smile:
Maybe try a opening a different browser window.

Hmm. It worked on chrome. Interesting.

Not in my chrome, much more interesting :thinking:

1 Like

Try changing the theme from ‘LUX’ to ‘CYBORG’. I think the bold in LUX is not that evident

1 Like