Using markdowns in callbacks

Dash Python
1

I have a function which takes in a list and renders the content as a markdown in a callback. My problem is the function works the first time a date range is selected, a list of files that match the date range is displayed. However, picking a different date has no effect on the output. Is there something I am doing wrong or is there a better way to do this?

app.layout = html.Div(children=[
html.H4(children='Pick a range'),

dcc.DatePickerRange(
    id='my-date-picker-range',
    min_date_allowed=dt(1995, 1, 1),
    max_date_allowed=dt(2030, 12, 30),
    initial_visible_month=dt.now(),
    with_portal=True,
    display_format='Do MMM, YYYY',
    
),

  
 html.Div(id='table-container',style={'color': 'red', 'border-style': 'outset'})

 ])


@app.callback(
dash.dependencies.Output('table-container', 'children'),
[dash.dependencies.Input('my-date-picker-range', 'start_date'),
 dash.dependencies.Input('my-date-picker-range', 'end_date')])

 def files_in_range(start_date, end_date, dt):

    DT = []
    s = 'advsot_'
    e = '.xlsx'
 
 
    if start_date is not None and end_date is not None:
       start_date = convert_to_date(start_date)
 
       end_date = convert_to_date(end_date)
 
       for i in dt:
          if start_date <= i <= end_date:
              DT.append(s+'{:%Y%m%d}'.format(i)+e)

     
       return dcc.Markdown(create_markdown(DT), id= 'table-container')
2

Hi!

I have a similar problem! When the text of my markdown is set during the loading, it is displayed correctly. But when the text is set with a callback, the markdown is only displayed as raw code.

markdown_text = '''
### Dash and Markdown

Dash apps can be written in Markdown.
Dash uses the [CommonMark](http://commonmark.org/)
specification of Markdown.
Check out their [60 Second Markdown Tutorial](http://commonmark.org/help/)
if this is your first introduction to Markdown!
'''

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
     dcc.Markdown(children=markdown_text, id='markdown'),
     html.Button('Submit', id='button'),
])

@app.callback(
    dash.dependencies.Output('markdown', 'children'),
    [dash.dependencies.Input('button', 'n_clicks')])
def update_output(n_clicks):
    if not n_clicks:
        raise PreventUpdate
    return '''
        ### Modified Markdown
    
        Dash uses the [CommonMark](http://commonmark.org/)
        specification of Markdown.
        Check out their [60 Second Markdown Tutorial](http://commonmark.org/help/)
        if this is your first introduction to Markdown!
    '''

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

Markdown treats tabs as code. So, you’ll need to dedent your strings with something like:

import textwrap
textwrap.dedent(your_string)
2 Likes