Markdown does not update code component properly after callback update.

athioak7 commented 3 months ago

I have a dcc.Markdown that I want to update based on user input in a Textarea. Everything works correctly besides the code component, which when edited stops showing the correct colors (and upon further inspection does not assign the correct classes in the html code).

Expected: The markdown should update the code component properly.

Environment:

dash==2.17.1
dash-core-components==2.0.0
dash-html-components==2.0.0
dash-table==5.0.0

- OS: Windows, Linux
- Browser: Chrome, Firefox 
- Chrome Version 126.0.6478.62, Firefox Version 127.0 (Windows)

Minimal reproducible example:


from dash import Dash, dcc, html, Input, Output

app = Dash(__name__)

app.layout = html.Div([
    dcc.Textarea(value='''def sum(a, b):
    return a+b

sum(2,2)''', id='codeta'),
    dcc.Markdown(id='markdown'),
])

@app.callback(
    Output('markdown', 'children'),
    Input('codeta', 'value')
)
def update_markdown(value) -> str:
    return f'```python\n\n{value}\n\n```'

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

markdown_bug

CNFeffery commented 3 months ago

@athioak7 alternative: demo

from dash import Dash, html, Input, Output
import feffery_antd_components as fac
import feffery_markdown_components as fmc

app = Dash(__name__)

app.layout = html.Div(
    [
        fac.AntdInput(
            value="""def sum(a, b):
    return a+b

sum(2,2)""",
            id="codeta",
            mode="text-area",
            autoSize={"minRows": 6, "maxRows": 6},
        ),
        fmc.FefferyMarkdown(id="markdown", codeTheme="a11y-dark"),
    ]
)

@app.callback(Output("markdown", "markdownStr"), Input("codeta", "value"))
def update_markdown(value) -> str:
    return f"```python\n\n{value}\n\n```"

if __name__ == "__main__":
    app.run(debug=True)

plotly / dash

Markdown does not update code component properly after callback update. #2895