{
 "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 layout and styling related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\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",
    "* **``style``** (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 ``style`` 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": [
    "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",
    "\"\"\", style={'background-color': '#F6F6F6', 'border': '2px solid black',\n",
    "            'border-radius': '5px', 'padding': '10px'})\n",
    "\n",
    "html_pane"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To update the ``object`` or ``style`` we can simply set it:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "html_pane.style = dict(html_pane.style, border='2px solid red')"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}