{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "\n",
    "pn.extension('katex', 'mathjax')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The ``LaTeX`` pane allows rendering LaTeX equations as HTML. It uses either [MathJax](https://www.mathjax.org) or [KaTeX](https://katex.org/) depending on the defined renderer. By default it will use the renderer loaded in the extension (e.g. ``pn.extension('katex')``), defaulting to KaTeX.\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "For layout and styling related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
    "\n",
    "* **``object``** (str or object): A string containing LaTeX code, an object with a ``_repr_latex_`` method, or a SymPy expression\n",
    "* **``renderer``** (object): The current value; must be one of the option values\n",
    "* **``style``** (dict): Dictionary specifying CSS styles\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "A ``LaTeX`` pane will render any object with a ``_repr_latex_`` method as well as SymPy expressions, or any string containing HTML. Any ``LaTeX`` section should be wrapped in `$` or ``\\(`` and ``\\(`` delimiters, e.g.:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "latex = pn.pane.LaTeX('The LaTeX pane supports two delimiters: $LaTeX$ and \\(LaTeX\\)', \n",
    "                      style={'font-size': '18pt'}, width=800)\n",
    "latex"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The ``LaTeX`` pane can be updated like other panes:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "latex.object = '$\\sum_{j}{\\sum_{i}{a*w_{j, i}}}$'"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If both renderers have been loaded we can override the default renderer:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.pane.LaTeX('$\\sum_{j}{\\sum_{i}{a*w_{j, i}}}$', renderer='mathjax', style={'font-size': '18pt'})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "And can also be composed like any other pane:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "maxwell = pn.pane.LaTeX(r\"\"\"\n",
    "$\\begin{aligned}\n",
    "  \\nabla \\times \\vec{\\mathbf{B}} -\\, \\frac1c\\, \\frac{\\partial\\vec{\\mathbf{E}}}{\\partial t} & = \\frac{4\\pi}{c}\\vec{\\mathbf{j}} \\\\\n",
    "  \\nabla \\cdot \\vec{\\mathbf{E}} & = 4 \\pi \\rho \\\\\n",
    "  \\nabla \\times \\vec{\\mathbf{E}}\\, +\\, \\frac1c\\, \\frac{\\partial\\vec{\\mathbf{B}}}{\\partial t} & = \\vec{\\mathbf{0}} \\\\\n",
    "  \\nabla \\cdot \\vec{\\mathbf{B}} & = 0\n",
    "\\end{aligned}\n",
    "$\"\"\", style={'font-size': '24pt'})\n",
    "\n",
    "cauchy_schwarz = pn.pane.LaTeX(object=r\"\"\"\n",
    "$\\left( \\sum_{k=1}^n a_k b_k \\right)^2 \\leq \\left( \\sum_{k=1}^n a_k^2 \\right) \\left( \\sum_{k=1}^n b_k^2 \\right)$\n",
    "\"\"\", style={'font-size': '24pt'})\n",
    "\n",
    "cross_product = pn.pane.LaTeX(object=r\"\"\"\n",
    "$\\mathbf{V}_1 \\times \\mathbf{V}_2 =  \\begin{vmatrix}\n",
    "\\mathbf{i} & \\mathbf{j} & \\mathbf{k} \\\\\n",
    "\\frac{\\partial X}{\\partial u} &  \\frac{\\partial Y}{\\partial u} & 0 \\\\\n",
    "\\frac{\\partial X}{\\partial v} &  \\frac{\\partial Y}{\\partial v} & 0\n",
    "\\end{vmatrix}\n",
    "$\"\"\", style={'font-size': '24pt'})\n",
    "\n",
    "spacer = pn.Spacer(width=50)\n",
    "\n",
    "pn.Column(\n",
    "    pn.pane.Markdown('# The LaTeX Pane'),\n",
    "    pn.Row(maxwell, spacer, cross_product, spacer, cauchy_schwarz)\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Controls\n",
    "\n",
    "The `LaTeX` pane exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.Row(latex.controls(jslink=True), latex)"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}