diff --git a/components/dash-core-components/src/fragments/Markdown.react.js b/components/dash-core-components/src/fragments/Markdown.react.js index 420bcb3387..c699938ef4 100644 --- a/components/dash-core-components/src/fragments/Markdown.react.js +++ b/components/dash-core-components/src/fragments/Markdown.react.js @@ -32,12 +32,20 @@ export default class DashMarkdown extends Component { } highlightCode() { + const isHighlighted = node => { + // a highlighted node will have <span> children which are what color the text + return node.children.length > 0; + }; + if (this.mdContainer) { const nodes = this.mdContainer.querySelectorAll('pre code'); if (MarkdownHighlighter.hljs) { for (let i = 0; i < nodes.length; i++) { - MarkdownHighlighter.hljs.highlightElement(nodes[i]); + if (!isHighlighted(nodes[i])) { + nodes[i].removeAttribute('data-highlighted'); + MarkdownHighlighter.hljs.highlightElement(nodes[i]); + } } } else { MarkdownHighlighter.loadhljs(); diff --git a/components/dash-core-components/tests/integration/misc/test_markdown_highlight.py b/components/dash-core-components/tests/integration/misc/test_markdown_highlight.py index 3ba2798a2d..361fcc7586 100644 --- a/components/dash-core-components/tests/integration/misc/test_markdown_highlight.py +++ b/components/dash-core-components/tests/integration/misc/test_markdown_highlight.py @@ -4,6 +4,10 @@ md_text = """```python +print('hello, world!') +```""" + +new_md_text = """```python import dash print('hello, world!') ```""" @@ -46,3 +50,32 @@ def trigger_md_rerender(nclicks): dash_dcc.wait_for_text_to_equal("#md-container code", "hljs override") assert dash_dcc.get_logs() == [] + + +def test_msmh003_update_md(dash_dcc): + app = Dash(__name__) + app.layout = html.Div( + [ + html.Button("Click", id="md-trigger"), + dcc.Markdown(md_text, id="md"), + ] + ) + + @app.callback(Output("md", "children"), [Input("md-trigger", "n_clicks")]) + def update_md(nclicks): + if nclicks is not None and nclicks > 0: + return new_md_text + return md_text + + dash_dcc.start_server(app) + + # a highlighted node will have <span> children which are what color the text + code = dash_dcc.wait_for_element("code[data-highlighted='yes']") + assert len(code.find_elements_by_tag_name("span")) == 2 + + dash_dcc.find_element("#md-trigger").click() + + code = dash_dcc.wait_for_element("code[data-highlighted='yes']") + assert len(code.find_elements_by_tag_name("span")) == 3 + + assert dash_dcc.get_logs() == []