Add control over math rendering in HTML and Markdown panes (#2847)

* Add control over math rendering in HTML and Markdown panes

* Change defaults

examples/reference/panes/HTML.ipynb

@@ -21,6 +21,7 @@
     "\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",

examples/reference/panes/Markdown.ipynb

@@ -22,6 +22,7 @@
     "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",
@@ -102,9 +103,7 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {
-    "scrolled": true
-   },
+   "metadata": {},
    "outputs": [],
    "source": [
     "pn.pane.Markdown(\"\"\"\n",
@@ -184,25 +183,32 @@
     "\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": {
-  "kernelspec": {
-   "display_name": "Python 2",
-   "language": "python",
-   "name": "python2"
-  },
   "language_info": {
-   "codemirror_mode": {
-    "name": "ipython",
-    "version": 2
-   },
-   "file_extension": ".py",
-   "mimetype": "text/x-python",
    "name": "python",
-   "nbconvert_exporter": "python",
-   "pygments_lexer": "ipython2",
-   "version": "2.7.16"
+   "pygments_lexer": "ipython3"
   }
  },
  "nbformat": 4,

panel/models/html.ts

@@ -46,8 +46,7 @@ export class HTMLView extends PanelMarkupView {
 
   render(): void {
     super.render()
-    const decoded = htmlDecode(this.model.text);
-    const html = decoded || this.model.text
+    const html = this.process_tex()
     if (!html) {
       this.markup_el.innerHTML = '';
       return;
@@ -57,6 +56,36 @@ export class HTMLView extends PanelMarkupView {
     this._setup_event_listeners()
   }
 
+  process_tex(): string {
+    const decoded = htmlDecode(this.model.text);
+    const text = decoded || this.model.text
+    if (this.model.disable_math || !this.contains_tex(text))
+      return text
+
+    const tex_parts = this.provider.MathJax.find_tex(text)
+    const processed_text: string[] = []
+
+    let last_index: number | undefined = 0
+    for (const part of tex_parts) {
+      processed_text.push(text.slice(last_index, part.start.n))
+      processed_text.push(this.provider.MathJax.tex2svg(part.math, {display: part.display}).outerHTML)
+
+      last_index = part.end.n
+    }
+
+    if (last_index! < text.length)
+      processed_text.push(text.slice(last_index))
+
+    return processed_text.join("")
+  }
+
+  private contains_tex(html: string): boolean {
+    if (!this.provider.MathJax)
+      return false
+
+    return this.provider.MathJax.find_tex(html).length > 0
+  };
+
   private _remove_event_listeners(): void {
     for (const node in this._event_listeners) {
       const el: any = document.getElementById(node)

panel/pane/markup.py

@@ -57,6 +57,10 @@ class HTML(DivPaneBase):
     allow room for whatever is being wrapped.
     """
 
+    disable_math = param.Boolean(default=True, doc="""
+        Whether to disable support for MathJax math rendering for
+        strings escaped with $$ delimiters.""")
+
     # Priority is dependent on the data type
     priority = None
 
@@ -257,6 +261,10 @@ class Markdown(DivPaneBase):
     dedent = param.Boolean(default=True, doc="""
         Whether to dedent common whitespace across all lines.""")
 
+    disable_math = param.Boolean(default=False, doc="""
+        Whether to disable support for MathJax math rendering for
+        strings escaped with $$ delimiters.""")
+
     extensions = param.List(default=[
         "extra", "smarty", "codehilite"], doc="""
         Markdown extension to apply when transforming markup.""")