HTML#
Open this notebook in Jupyterlite | Download this notebook from GitHub (right-click to download).
import panel as pn
pn.extension()
The HTML
pane allows rendering arbitrary HTML in a panel. It renders strings containing valid HTML as well as objects with a _repr_html_
method and may define custom CSS styles.
Parameters:#
For details on other options for customizing the component see the layout and styling how-to guides.
disable_math
(boolean,default=True
): Whether to disable MathJax math rendering for strings escaped with$$
delimiters.object
(str or object): The string or object with_repr_html_
method to displaysanitize_html
(boolean,default=False
): Whether to sanitize HTML sent to the frontend.sanitize_hook
(Callable,default=bleach.clean
): Sanitization callback to apply ifsanitize_html=True
.styles
(dict): Dictionary specifying CSS styles
The HTML
pane accepts the entire HTML5 spec including any embedded script tags, which will be executed. It also supports a styles
dictionary to apply styles to control the style of the <div>
tag the HTML contents will be rendered in.
styles = {
'background-color': '#F6F6F6', 'border': '2px solid black',
'border-radius': '5px', 'padding': '10px'
}
html_pane = pn.pane.HTML("""
<h1>This is an HTML pane</h1>
<code>
x = 5;<br>
y = 6;<br>
z = x + y;
</code>
<br>
<br>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
""", styles=styles)
html_pane
To update the object
or styles
we can simply set it:
html_pane.styles = dict(html_pane.styles, border='2px solid red')
Open this notebook in Jupyterlite | Download this notebook from GitHub (right-click to download).