如何在 R Shiny 中包含通过 Reactable 渲染 KaTeX 的 Js 代码？

Question

我需要为我的闪亮应用程序创建一个带有

reactable

的表格，女巫应该包含很多数学公式（行和列），所以不幸的是

mathjax

并不是真正的选择，因为它的客户端渲染行为.

假设我有以下内容 MRE：

ui <- fluidPage(
  useShinyjs(),
  tags$head(
    tags$link(
      rel = "stylesheet",
      href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css",
      integrity = "sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ",
      crossorigin = "anonymous"),
    HTML('<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>'),
    HTML('<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>'),
    HTML('<script>
          document.addEventListener("DOMContentLoaded", function(){
          renderMathInElement(document.body, {
          delimiters: [{left: "$", right: "$", display: false}]
          });})
         </script>'
    )
  ),
  
  reactableOutput("dftest")
)
col1 <- c(1,2,3,4,5)
col2 <- c(6,7,8,9,10)
df <- data.frame(col1,col2)

server <- function(session, input, output) {
  output$dftest <- renderReactable({
    reactable(
      df,
      onClick = "expand",
      details = function(index) {
        if (index <= length(absH)) {
          navs_pill(
            nav("tab1",
                div(
                  tags$p(paste0("$x_i = ", col1[index], " * x^2 * \\bar{x}$")))
            ),
            nav("tab2",
                div(
                  tags$p(paste0("$y_i = ", col2[index], " * \\Delta x_i$"))))
          )
        }
      })
  })
}

shinyApp(ui, server)

如果我使用

htmlOutput

、

renderUI

和

kableExtra

创建表格，则以下内容将使一切变得完美：

tagList(
      HTML(kable_styling(tab_khf1, bootstrap_options = c("striped", "hover"))),
      tags$script(HTML(
        'renderMathInElement(document.getElementById("khf1Tbl1"), {delimiters: [{left: "$", right: "$", display: false}]});'))
    )

我尝试过与

reactable

相同，但无法正确实现。

Answer 1

将类

"math"

添加到包含一些数学表达式的

p

元素。并在标题中添加此脚本：

$(document).ready(function() {
  $("body").on("click", "button", function() {
    var mathElements = document.getElementsByClassName("math");
    for(var i = 0; i < mathElements.length; i++) {
      renderMathInElement(
        mathElements[i], 
        {delimiters: [{left: "$", right: "$", display: false}]}
      );
    }
  });
});

---

编辑

对于表格标题：

    reactable(
      df,
      onClick = "expand",
      details = function(index) {
        if (index <= 4) {
          navs_pill(
            nav("tab1",
                div(
                  tags$p(paste0("$x_i = ", col1[index], " * x^2 * \\bar{x}$")))
            ),
            nav("tab2",
                div(
                  tags$p(paste0("$y_i = ", col2[index], " * \\Delta x_i$"))))
          )
        }
      }) |> htmlwidgets::onRender(
        'function(el) {
          renderMathInElement(el, {
            delimiters: [{left: "$", right: "$", display: false}]
          });
        }'
      )