如何在R Shiny弹窗中直接渲染KaTeX，无需弹窗内点击

你的问题出在JavaScript代码绑定了点击事件，只有点击页面才会触发公式渲染。要实现弹窗打开时自动渲染，只需修改监听的事件类型，改为监听弹窗的打开事件即可：

修改后的完整代码 #

renderKaTeX <- '
$(document).on("popup:open", function(e) {
  // 获取当前打开的弹窗元素
  var popup = e.target;
  // 在弹窗内查找所有带math类的元素
  var mathElements = popup.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$")         
        )
      )
    })
  }
)

关键修改说明 #

• 移除了原来的$(document).ready()和body.click事件绑定
• 改用Framework7的popup:open事件监听：每当弹窗打开时，自动触发KaTeX渲染
• 只在当前打开的弹窗内查找math类元素，避免重复渲染页面其他元素

内容的提问来源于stack exchange，提问作者Onur