bokeh issue on loading katex in jupyter notebook

Question

I'm trying to replicate the bokeh latex example mentioned at https://docs.bokeh.org/en/latest/docs/user_guide/extensions_gallery/latex.html#userguide-extensions-examples-latex in jupyter notebook for LabelSet. I could see the katex.min.js being loaded from web console. However when the LatexLabel renders, it states katex not defined. Katex JS doc says, it should be available globally once js is loaded.

import * as p from "core/properties"
import {LabelSet, LabelSetView} from "models/annotations/label_set"
declare const katex: any

export class LatexLabelSetView extends LabelSetView {
  model: LatexLabelSet

  render(): void {
    const draw = this._v_css_text.bind(this)
    const {ctx} = this.plot_view.canvas_view
    const [sx, sy] = this._map_data()

    for (let i = 0, end = this._text.length; i < end; i++) {
      try {
        draw(ctx, i, this._text[i], sx[i] + this._x_offset[i], sy[i] - this._y_offset[i], this._angle[i])
        katex.render(this._text[i], this.el, {displayMode: true})
      }
      catch(e) {
        console.log( 'Error: ' + e);
      }
    }
  }
}

class LatexLabelSet(LabelSet):
    __javascript__ = ["https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"]
    __css__ = ["https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css"]
    __implementation__ = TypeScript(TS_CODE)

Also tried adding the script element into document root. No luck though.

export class LatexLabelSet extends LabelSet {
  properties: LatexLabelSet.Props

  constructor(attrs?: Partial<LatexLabelSet.Attrs>) {
    super(attrs)
  }

  static init_LatexLabelSet() {
    let jsNode = document.createElement('script')
    jsNode.id = 'bokeh-katex-js'
    jsNode.src = "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"
    let cssNode = document.createElement('link')
    cssNode.id = 'bokeh-katex-css'
    cssNode.rel= 'stylesheet'
    cssNode.href = "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css"
    document.getElementsByClassName('bk-root')[0].appendChild(cssNode)
    document.getElementsByClassName('bk-root')[0].appendChild(jsNode)
    this.prototype.default_view = LatexLabelSetView
  }
}

Any directions would be helpful.

Answer 1

Note from maintainers: Initial built in LaTeX support was added in version 2.4, see this new answer https://stackoverflow.com/a/69198423/3406693

---

As stated in https://docs.bokeh.org/en/latest/docs/user_guide/embed.html#components, this is not possible to achieve within the notebook.

It says

Note that in Jupyter Notebooks, it is not possible to use components and show in the same notebook cell.

Indeed, if you use the code below, it opens a new tab with the plot and the formula, but if you call output_notebook(), the text does not appear and the browser console throws Uncaught ReferenceError: katex is not defined.

p = figure(title="LaTex Demonstration")
p.line([0,0,1,1,0],[0,1,1,0,0])
latex = LatexLabel(text=r"e^{i\pi}+1=0", 
                   x=0.4, y=0.55,
                   render_mode='css', text_font_size='16pt',
                   background_fill_alpha=0)
p.add_layout(latex)
show(p)

Working in new tab:

Not working inside notebook:

Answer 2

Bokeh 2.4 adds support for LaTeX (and MathML) to some elements in Bokeh directly (no need to use an extension). Currently, you can use LaTeX on axis labels, tick labels, div widgets, and paragraph widgets, and this also works in Jupyter notebooks. LaTeX support for more elements should be added soon. For more information about the new math text feature and how to use them, see the Bokeh 2.4 release blogpost, the new blackbody radiation example, and the Bokeh user guide!