r - R Shiny - 将 MathJax 与 tippy.js 一起使用

Question

下面的应用程序有一个包含数学表达式的工具提示，我想知道是否可以在 MathJax 中呈现表达式？

这是应用程序：

library(shiny)
library(tippy)

shinyApp(
  ui = fluidPage(
    tippyOutput('math')
  ),
  server = function(input, output) {

    output$math = renderTippy({

      tippy("Click me!", 
            tooltip = HTML(as.character(withMathJax('$$\\frac{1}{\\pi\\gamma\\,\\left[1 +
               \\left(\\frac{x-x_0}{\\gamma}\\right)^2\\right]}\\!$$'))))


    })
  }
)

tippy.js的文档说可以在工具提示中包含 HTML 内容，但我似乎无法正确呈现数学表达式。

的输出withMathJax()是一个长度为 3 的列表：一个头标记、一个包含数学表达式的字符串和一个脚本标记。我试图通过包装将其转换为单个字符串，HTML(as.character(...))但它不起作用。

---

如果我自己渲染 MathJax 表达式（没有提示），如下所示：

output$trial = renderUI({
      withMathJax('$$\\frac{1}{\\pi\\gamma\\,\\left[1 +
               \\left(\\frac{x-x_0}{\\gamma}\\right)^2\\right]}\\!$$')
    })

...输出如下所示：

但是输出renderTippy看起来很不一样：

例如，缺少<span class="MathJax_Preview" style="color: inherit; display: none;"></span>和节点。<div class="MathJax_Display" style="text-align: center;">...</div>

这是因为if (window.MathJax) MathJax.Hub.Queue(["Typeset", MathJax.Hub]);没有运行吗？

Answer 1

这似乎是不可能的。这是一种使用KaTeX获取数学表达式的方法：

library(shiny)
library(tippy)

shinyApp(
  ui = fluidPage(
    tags$head(
      tags$link(rel="stylesheet", 
                href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css", 
                integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ",
                crossorigin="anonymous"),
      HTML('<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>'),
      HTML('<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>'),
      HTML('
    <script>
      $(document).ready(function(){
        $("#math").on("mouseover", function(){
          setTimeout(function(){renderMathInElement(document.body, {delimiters: [{left: "$", right: "$", display: true}]});},0);
        })
      });
    </script>')
    ),
    tippyOutput('math'),
  ),

  server = function(input, output) {

    output$math = renderTippy({

      tippy('Click me!', 
            tooltip = '$\\frac{1}{\\pi\\gamma\\,\\left[1 + \\left(\\dfrac{x-x_0}{\\gamma}\\right)^2\\right]}\\!$')

    })
  }
)