Allow HTML content in Markdown cells

[mjanschek]

Context

dash                      1.20.0
dash-bootstrap-components 0.12.2
dash-core-components      1.16.0
dash-html-components      1.1.3 
dash-renderer             1.9.1 
dash-table                4.11.3

Describe the bug

I am not sure, if this is a bug or intended behaviour. A Datatable column that presents Markdown can't render html snippets. In this case, I try to include an icon from the bootstrap font.

Expected behavior

A Data Table that present Markdown should be able to render html code, as it's encouraged by Markdown guidelines. If I directly edit the websites html, the icon can be displayed. So the font is included correctly.

Minimal example

app.py

import dash
import dash_table

bs_icons = {
    "href": "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css",
    "rel": "stylesheet",
    "crossorigin": "anonymous",
}

app = dash.Dash(__name__, external_stylesheets=[bs_icons])

app.layout = dash_table.DataTable(
    id='table',
    columns=[{"name": "Alarm", "id": "html", "presentation": "markdown"}],
    data=[{"html": '<i class="bi bi-alarm"></i>'}],
)

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

Screenshots Original Table Edited Table (wanted result)

[alexcjohnson]

(moved to the table repo and recast as a feature request)

Dash-table uses Remarkable for its markdown, and by default Remarkable disables HTML input. I presume this is for security reasons, as untrusted HTML input often creates XSS vulnerabilities. We would, however, be comfortable exposing the ability to enable HTML input on an opt-in basis. This may be as simple as adding html to the markdown_options prop and the corresponding interface, if someone would like to create a PR to try it!

[mjanschek]

@alexcjohnson thank you so much for considering this!

[AnnMarieW]

Hey @alexcjohnson - Thanks for the pointers - that worked great! :cake: I'll do a PR.

import dash
import dash_table

bs_icons = {
    "href": "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css",
    "rel": "stylesheet",
    "crossorigin": "anonymous",
}

app = dash.Dash(__name__, external_stylesheets=[bs_icons])

app.layout = dash_table.DataTable(
    id="table",
    columns=[{"name": "Alarm", "id": "html", "presentation": "markdown"}],
    data=[{"html": '<i class="bi bi-alarm"></i>'}, {"html": '<i class="bi bi-emoji-sunglasses"></i>'}],
    markdown_options={"html": True},
)

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

[prhbrt]

Quick note, also link_target as discussed here works now.

markdown_options={"html": True, "link_target": "_self"},