dcc.Markdown does not render table with curly bracket ({) in cell

Dash Python
1

Hello everyone,

I have some commonmark text with an html table, where the text of one of the cells has curly brackets (to display a python dictionary).

This is not rendered at all in dcc.Markdown, completely hiding the table from the result. I have tried to escape the curly bracket character, but it doesn’t work, and I have also tried to rule out any other potential issues with no luck.

The table looks like this:

<table>
  <tr>
    <th>header1</th>
    <th>header2</th>
  </tr>
  <tr>
    <td>row1</td>
    <td>None</td>
  </tr>
  <tr>
    <td>row2</td>
    <td>{'key': 'value'}</td>
  </tr>
</table>

I am working with dash v2.18.1

Is this a bug of the dcc.Markdown? How can I make this work?

2

Hi @anina

It looks like a bug in the html parser that dcc.Markdown is using.

As a workaround you could use a markdown table.

| header1 | header2 |
|--------|--------|
| row1   | None   |
| row2   | `{'key': 'value'}` |

Or you could try the RichTextEdit from dash-mantine-components


from dash import Dash
import dash_mantine_components as dmc

app = Dash()

text = """
<table>
  <tr>
    <th>header1</th>
    <th>header2</th>
  </tr>
  <tr>
    <td>row1</td>
    <td>None</td>
  </tr>
  <tr>
    <td>row2</td>
    <td><code>{'key': 'value'}</code></td>
  </tr>
</table>
"""

app.layout = dmc.MantineProvider([
    dmc.RichTextEditor(
        html=text,
        extensions=[
            "StarterKit",
            "Table",
            "TableCell",
            "TableHeader",
            "TableRow",
        ],
    )
])

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