Allow HTML content in Markdown cells
mjanschek opened this issue · 4 comments
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)
(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!
@alexcjohnson thank you so much for considering this!
Hey @alexcjohnson - Thanks for the pointers - that worked great! 🍰
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)