在jupyter笔记本中加载katex的背景问题

Question

我正在尝试在jupyter笔记本中为LabelSet复制https://docs.bokeh.org/en/latest/docs/user_guide/extensions_gallery/latex.html#userguide-extensions-examples-latex中提到的bokeh胶乳示例。我可以看到katex.min.js从Web控制台加载。但是，当LatexLabel渲染时，它指出未定义katex。Katex JS文档说，一旦加载JS，它就应该在全球范围内可用。

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/[email protected]/dist/katex.min.js"]
    __css__ = ["https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"]
    __implementation__ = TypeScript(TS_CODE)

[还尝试将script元素添加到文档根目录中。不过没有运气。

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/[email protected]/dist/katex.min.js"
    let cssNode = document.createElement('link')
    cssNode.id = 'bokeh-katex-css'
    cssNode.rel= 'stylesheet'
    cssNode.href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
    document.getElementsByClassName('bk-root')[0].appendChild(cssNode)
    document.getElementsByClassName('bk-root')[0].appendChild(jsNode)
    this.prototype.default_view = LatexLabelSetView
  }
}

任何方向都会有帮助。

Answer 1

如https://docs.bokeh.org/en/latest/docs/user_guide/embed.html#components中所述，这在笔记本电脑中无法实现。

说

请注意，在Jupyter笔记本电脑中，无法使用组件并在同一笔记本电脑单元中显示。

确实，如果您使用下面的代码，它将打开一个带有图形和公式的新选项卡，但是如果您调用output_notebook()，则不会出现文本，并且浏览器控制台将抛出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)

使用新标签页：

无法在笔记本内部工作：