直接在模态内渲染 KaTeX，而无需在 R Shiny 中模态内额外"click"

Question

我正在努力渲染我的弹出框内的KaTeX公式。我使用的Javascript函数做到了这一点，但不幸的是，只有在我做了一个"点击"在生成的弹出窗口内。

是的，遗憾的是我在js有0的知识，找不到一个合适的参数(?)，这确实渲染一切，而不需要在某个地方点击。

这是一个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$")         
)
)
})
}
)

这可能只是我遗漏的一个论点，但这些天来我一直在为这件事而挣扎。

谢谢你的帮助

Answer 1

您可以使用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)
))         
)
)
})
}
)