{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The ``Markdown`` pane allows rendering arbitrary [Markdown](https://python-markdown.github.io) in a panel. It renders strings containing valid Markdown as well as objects with a ``_repr_markdown_`` 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",
    "* **``dedent``** (bool): Whether to dedent common whitespace across all lines.\n",
    "* **``disable_math``** (boolean, `default=False`): Whether to disable MathJax math rendering for strings escaped with $$ delimiters.\n",
    "* **``extensions``** (list): A list of [Python-Markdown extensions](https://python-markdown.github.io/extensions/) to use.\n",
    "* **``object``** (str or object): A string containing Markdown, or an object with a ``_repr_markdown_`` method\n",
    "* **``style``** (dict): Dictionary specifying CSS styles\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The ``Markdown`` pane accepts all valid Markdown, including embedded HTML. It also supports a ``style`` dictionary to apply styles to control the appearance of the ``<div>`` tag the Markdown contents will be rendered in."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.pane.Markdown(\"\"\"\n",
    "\n",
    "# H1\n",
    "## H2\n",
    "### H3\n",
    "#### H4\n",
    "##### H5\n",
    "###### H6\n",
    "\n",
    "### Emphasis\n",
    "\n",
    "Emphasis, aka italics, with *asterisks* or _underscores_.\n",
    "\n",
    "Strong emphasis, aka bold, with **asterisks** or __underscores__.\n",
    "\n",
    "Combined emphasis with ** asterisks and _underscores_ **.\n",
    "\n",
    "<br>\n",
    "\n",
    "### Table\n",
    "\n",
    "| Syntax | Description |\n",
    "| ----------- | ----------- |\n",
    "| Header | Title |\n",
    "| Paragraph | Text |\n",
    "\n",
    "<br>\n",
    "\n",
    "### Fenced code\n",
    "\n",
    "```python\n",
    "{\n",
    "  \"firstName\": \"John\",\n",
    "  \"lastName\": \"Smith\",\n",
    "  \"age\": 25\n",
    "}\n",
    "```\n",
    "\n",
    "### Nested list\n",
    "\n",
    "1. First list item\n",
    "    - First nested list item\n",
    "        - Second nested list item\n",
    "\n",
    "[This is a link to panel web portal](https://panel.pyviz.org/)\n",
    "\n",
    "------------\n",
    "\"\"\", width=500)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If you want to control the behavior of the HTML that is generated from the Markdown source, it is often possible to do that by passing parameters to the `style` parameter of this pane.  For instance, you can add a blue border around a Markdown table as follows:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.pane.Markdown(\"\"\"\n",
    "| Syntax | Description |\n",
    "| ----------- | ----------- |\n",
    "| Header | Title |\n",
    "| Paragraph | Text |\n",
    "\n",
    "\"\"\", style={'border': \"4px solid blue\"})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "However, styles specified in this way will only be applied to the outermost Div, and there is not currently any way to apply styling in this way to specific internal elements of the HTML.  In this case, we cannot use the `style` parameter to control styling of the rows or headings of the generated table. \n",
    "\n",
    "If we do want to change specific internal elements of the generated HTML, we can do so by providing an HTML/CSS &lt;style&gt; section. For instance, we can change the border thickness for headers and data as follows, but note that the changes will apply to subsequent Markdown as well, including other cells if in a notebook context:\n",
    "\n",
    "(For this reason the code here saves the result to a separate HTML file, to avoid changing the style for all other tables).\n",
    "\n",
    "````python\n",
    "import panel as pn\n",
    "from bokeh.resources import INLINE\n",
    "SimpleTable = pn.pane.Markdown(\"\"\"\n",
    "<style>\n",
    "table, th, td {\n",
    "  border: 5px solid black;\n",
    "}\n",
    "</style>\n",
    "| Syntax | Description |\n",
    "| ----------- | ----------- |\n",
    "| Header | Title |\n",
    "| Paragraph | Text |\n",
    "\n",
    "\"\"\")\n",
    "\n",
    "SimpleTable.save('SimpleTable', resources=INLINE)\n",
    "````"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<img src=\"../../assets/markdown_simpletable.png\" alt=\"SimpleTable\"></img>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If you want to change styling only for a specific bit of Markdown text, you can do so, but it requires making a special type of Div as a target for the styling. E.g. here we can have only the following table use a red border, without affecting the entire notebook:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "css = \"\"\"\n",
    "div.special_table + table * {\n",
    "  border: 1px solid red;\n",
    "}\n",
    "\"\"\"\n",
    "\n",
    "pn.extension(raw_css=[css])\n",
    "\n",
    "pn.panel(\"\"\"\n",
    "<div class=\"special_table\"></div>\n",
    "\n",
    "| Syntax | Description |\n",
    "| ----------- | ----------- |\n",
    "| Header | Title |\n",
    "| Paragraph | Text |\n",
    "\n",
    "\"\"\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `Markdown` pane also supports math rendering by encapsulating the strign to be rendered with ``$$`` delimiters."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.pane.Markdown(\"\"\"\n",
    "## Markdown $$LaTeX$$ support\n",
    "\n",
    "The Markdown pane supports math rendering for string encapsulated with double $ delimiters: $$\\sum_{j}{\\sum_{i}{a*w_{j, i}}}$$\n",
    "\"\"\", width=800)"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}