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 的 documentation 表示可以在工具提示中包含 HTML 内容，但我似乎无法正确呈现数学表达式。

withMathJax()的输出是一个长度为3的列表：一个head标签，一个包含数学表达式的字符串和一个script标签。我试图通过将其包装在 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]}\!$')

    })
  }
)

R Shiny - 使用 MathJax 和 tippy.js

R Shiny - Using MathJax with tippy.js

r

shiny

tippyjs