javascript 如何在R Shiny中包含用于通过reactable渲染KaTeX的Js代码？

idfiyjo8 于 2022-12-10 发布在 Java

关注(0)|答案(1)|浏览(163)

我需要用reactable为我的闪亮应用程序创建一个表，它应该包含很多数学公式（在行和列中），所以不幸的是，mathjax并不是一个真正的选项，因为它的客户端呈现行为。
假设我有以下MRE：

ui <- fluidPage(
  useShinyjs(),
  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.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，但无法正确实现它。
希望有人知道我如何才能做到这一点

JavaScript

来源：https://stackoverflow.com/questions/74731933/how-can-one-include-js-code-for-rendering-katex-by-reactable-in-r-shiny

1条答案

按热度按时间

kg7wmglp1#

将类"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}]
          });
        }'
      )

赞(0）回复(0）举报 2022-12-10

我来回答

javascript 如何在R Shiny中包含用于通过reactable渲染KaTeX的Js代码？

1条答案

编辑

相关问题

热门标签

最新问答