{
 "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 enables rendering LaTeX equations as HTML using either the [KaTeX](https://katex.org/) or [MathJax](https://www.mathjax.org) renderer.\n",
    "\n",
    "You must load the desired renderer manually (e.g., `pn.extension('katex')` or `pn.extension('mathjax')`). If both are loaded, KaTeX is used by default.\n",
    "\n",
    "Please note that both [KaTeX](https://katex.org/) and [MathJax](https://www.mathjax.org) support only a subset of the features available in a full LaTeX renderer. For detailed information on supported features, refer to their respective documentation.\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "For details on additional options for customizing the component, refer to the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
    "\n",
    "* **`object`** (str or object): A string containing LaTeX code, an object with a `_repr_latex_` method, or a [SymPy](https://www.sympy.org/en/index.html) expression.\n",
    "* **`renderer`** (object): The current renderer; must be one of the available options.\n",
    "* **`styles`** (dict): A dictionary specifying CSS styles.\n",
    "\n",
    "___\n",
    "\n",
    "A `LaTeX` pane will render any object with a `_repr_latex_` method, [SymPy](https://www.sympy.org/en/index.html) expressions, or any string containing LaTeX. Any LaTeX content should be wrapped in `$...$` or `\\(...\\)` delimiters, for example:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "latex = pn.pane.LaTeX(\n",
    "    r'The LaTeX pane supports two delimiters: $LaTeX$ and \\(LaTeX\\)', styles={'font-size': '18pt'}\n",
    ")\n",
    "\n",
    "latex"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Its important to prefix your LaTeX strings with an `r` to make the string a *raw* string and not escape the \\\\ character."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.Column(\n",
    "    pn.pane.LaTeX(\"$\\frac{1}{n}$\"), # Will not work\n",
    "    pn.pane.LaTeX(r\"$\\frac{1}{n}$\")\n",
    ")"
   ]
  },
  {
   "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 = r'$\\sum_{j}{\\sum_{i}{a*w_{j, i}}}$'"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Lets change it back:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "latex.object = r'The LaTeX pane supports two delimiters: $LaTeX$ and \\(LaTeX\\)'"
   ]
  },
  {
   "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(r'The LaTeX pane supports two delimiters: $LaTeX$ and \\(LaTeX\\)', renderer='mathjax', styles={'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",
    "$\"\"\", styles={'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",
    "\"\"\", styles={'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",
    "$\"\"\", styles={'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)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Sympy\n",
    "\n",
    "Panels LaTeX pane can render Sympy expressions as shown below:\n",
    "\n",
    "```python\n",
    "import sympy as sp\n",
    "import panel as pn\n",
    "\n",
    "pn.extension(\"mathjax\")\n",
    "\n",
    "# Define a symbol and a symbolic expression using SymPy\n",
    "x = sp.symbols('x')\n",
    "expression = sp.integrate(sp.sin(x)**2, x)\n",
    "\n",
    "# Create a LaTeX pane to display the expression\n",
    "latex_pane = pn.pane.LaTeX(expression, styles={'font-size': '20px'})\n",
    "\n",
    "# Serve the panel\n",
    "pn.Column(\n",
    "    \"# A sympy expression rendered in Panel: \", latex_pane\n",
    ")\n",
    "```\n",
    "\n",
    "![Sympy in LaTeX pane](../../assets/panel-sympy.png)"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}