withMathJax 在 modalDialog table

Question

我正在尝试将 LateX 公式包含在 table 中，并且我正在使用 MathJack 库来执行此操作。 Everthing 在 modalDialog 之外工作顺利，但是当在 modalDialog 中生成 table 时，它不会按预期显示。我想这与帮助页面中写的内容有关“它只需要在应用程序中调用一次，除非在页面加载后呈现内容，例如通过 renderUI()，在这种情况下我们必须调用它明确每次我们将数学表达式写入输出时。”。但是我不知道如何解决这个问题。

这是一个 repex :

library(shiny)

ui <- shinyUI(
  fluidPage(
    withMathJax(), 
    actionButton("open", "Open")))


server <- function(input, output, session){  
  
  output$mytable <- renderTable({  
    df <- data.frame(A = c(HTML("$$\alpha+\beta$$"), "$$\alpha+\gamma$$", "$$\alpha+\lambda$$"),B = c(111111, 3333333, 3123.233))  
    df  
  }, sanitize.text.function = function(x) x)
  
  
  
  observeEvent(input$open, {
    showModal(modalDialog(
      withMathJax(),
      h2("$$\mbox{My Math example }\sqrt{2}$$"),
      tableOutput('mytable')))
  })
}

shinyApp(ui = ui, server = server)

Answer 1

奇怪的是，它是这样工作的：

  observeEvent(input$open, {
    showModal(withMathJax(modalDialog(
      h2("$$\mbox{My Math example }\sqrt{2}$$"),
      withMathJax(tableOutput('mytable')))))
  })

编辑

由于这个解决方案存在一些问题，这里有一个使用 KaTeX 而不是 MathJax 的解决方案：

library(shiny)

js <- " 
$(document).on('shiny:value', function(event) {
  if(event.name === 'mytable'){
    // h2 element
    var $h2 = $('#title');
    var title = $h2.html();
    var matches_title = title.match(/(%%+[^%]+%%)/g);
    var i, code;
    for(i=0; i<matches_title.length; i++){
      code = matches_title[i].slice(2,-2);
      title = title.replace(matches_title[i], katex.renderToString(code));
    }
    $h2.html(title);
    $h2.css('visibility', 'visible');
    // table:
    var matches = event.value.match(/(%%+[^%]+%%)/g);
    var newvalue = event.value;
    for(i=0; i<matches.length; i++){
      code = matches[i].slice(2,-2);
      newvalue = newvalue.replace(matches[i], katex.renderToString(code));
    }
    event.value = newvalue;
  }
})
" 

css <- "#mytable td:nth-child(3) {display: none;}"

ui <- fluidPage(
  tags$head(
    tags$link(rel="stylesheet", href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css", integrity="sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ", crossorigin="anonymous"),
    tags$script(defer="", src="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.js", integrity="sha384-VQ8d8WVFw0yHhCk5E8I86oOhv48xLpnDZx5T9GogA/Y84DcCKWXDmSDfn13bzFZY", crossorigin="anonymous"),
    tags$script(HTML(js)),
    tags$style(HTML(css))
  ),
  titlePanel("Hello Shiny!"),
  br(),
  actionButton("open", "Open")
)

server <- function(input, output, session){  
  
  output$mytable <- renderTable({ 
    data.frame(
      A = c("%%\alpha+\beta%%", "%%\alpha+\gamma%%", "%%\alpha+\lambda%%"),
      B = c(111111, 3333333, 3123.233),
      ` ` = rep(input$open, 3),
      check.names = FALSE
    ) 
  }, sanitize.text.function = function(x) x)
  
  
  observeEvent(input$open, {
    showModal(modalDialog(
      h2(
        id = "title", 
        style = "visibility: hidden;", 
        "%%\boxed{Math}\sqrt{2}%%"
      ),
      tableOutput("mytable")
    ))
  })
  
}

shinyApp(ui, server)

请注意，我在数据框中包含一个反应列：

` ` = rep(input$open, 3)

那是因为如果我不这样做，KaTeX 渲染只能工作一次。然后我用一些 CSS.

隐藏此列

withMathJax 在 modalDialog table

withMathJax inside modalDialog table

r

mathjax

shiny

编辑