{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "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.\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "For details on other options for customizing the component see the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
    "\n",
    "* **`disable_math`** (boolean, `default=True`): Whether to disable MathJax math rendering for strings escaped with `$$` delimiters.\n",
    "* **`object`** (str or object): The string or object with ``_repr_html_`` method to display\n",
    "* **`sanitize_html`** (boolean, `default=False`): Whether to sanitize HTML sent to the frontend.\n",
    "* **`sanitize_hook`** (Callable, `default=bleach.clean`): Sanitization callback to apply if `sanitize_html=True`.\n",
    "* **`styles`** (dict): Dictionary specifying CSS styles\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "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."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "styles = {\n",
    "    'background-color': '#F6F6F6', 'border': '2px solid black',\n",
    "    'border-radius': '5px', 'padding': '10px'\n",
    "}\n",
    "\n",
    "html_pane = pn.pane.HTML(\"\"\"\n",
    "<h1>This is an HTML pane</h1>\n",
    "\n",
    "<code>\n",
    "x = 5;<br>\n",
    "y = 6;<br>\n",
    "z = x + y;\n",
    "</code>\n",
    "\n",
    "<br>\n",
    "<br>\n",
    "\n",
    "<table>\n",
    "  <tr>\n",
    "    <th>Firstname</th>\n",
    "    <th>Lastname</th> \n",
    "    <th>Age</th>\n",
    "  </tr>\n",
    "  <tr>\n",
    "    <td>Jill</td>\n",
    "    <td>Smith</td> \n",
    "    <td>50</td>\n",
    "  </tr>\n",
    "  <tr>\n",
    "    <td>Eve</td>\n",
    "    <td>Jackson</td> \n",
    "    <td>94</td>\n",
    "  </tr>\n",
    "</table>\n",
    "\"\"\", styles=styles)\n",
    "\n",
    "html_pane"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To update the ``object`` or ``styles`` we can simply set it:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "html_pane.styles = dict(html_pane.styles, border='2px solid red')"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}