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]}\\!$')

    })
  }
)