直接在模态内渲染KaTeX,而无需在R Shiny的模态内进行额外的“点击”

y0u0uwnf  于 2023-01-22  发布在  其他
关注(0)|答案(1)|浏览(118)

我正在努力在弹出窗口中渲染KaTeX公式。我使用的Javascript函数可以做到这一点,但不幸的是,只有在我在生成的弹出窗口中"点击"之后。
是的,不幸的是我对js一无所知,找不到一个合适的参数(?),它不需要在某个地方点击就可以呈现所有内容。

    • 以下是一个RME**:
renderKaTeX <- '
$(document).ready(function() {
        $("body").on("click", function() {
          var mathElements = document.getElementsByClassName("math");
          for(var i = 0; i < mathElements.length; i++) {
            renderMathInElement(
              mathElements[i], {
                delimiters: [{left: "$", right: "$", display: false}]
              });
          }
        });
 });
'

library(shiny)
library(shinyMobile)

shinyApp(
  ui = f7Page(
    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"),
      tags$script(defer = "", src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js",integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij",crossorigin="anonymous"),
      tags$script(defer = "",src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js",integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI",crossorigin="anonymous"),
      tags$script(HTML(renderKaTeX))
    ),
    title = "Popup",
    f7SingleLayout(
      navbar = f7Navbar(title = ""),
      f7Button("btn", "Open Popup")
    )
  ),
  server = function(input, output, session) {
    observeEvent(input$btn, {
      f7Popup(
        id = "popup1",
        title = "test",
        tags$div(class = "math",
                 tags$p("render me without click pls: $X$")         
        )
      )
    })
  }
)

这可能只是一个论点,我错过了,但仍然挣扎,因为天在这个问题上。
谢谢你的帮忙

hl0ma9xz

hl0ma9xz1#

您可以使用katex软件包:

library(katex)
library(shiny)
library(shinyMobile)

shinyApp(
  ui = f7Page(
    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"),
      tags$script(defer = "", src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js",integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij",crossorigin="anonymous"),
      tags$script(defer = "",src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js",integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI",crossorigin="anonymous")
    ),
    title = "Popup",
    f7SingleLayout(
      navbar = f7Navbar(title = ""),
      f7Button("btn", "Open Popup")
    )
  ),
  server = function(input, output, session) {
    observeEvent(input$btn, {
      f7Popup(
        id = "popup1",
        title = "test",
        tags$div(
          class = "math",
          tags$p(HTML(
            katex_html("\\int f = \\pi", displayMode = FALSE, preview = FALSE)
          ))         
        )
      )
    })
  }
)

相关问题