使用renderUI()时Shiny中MathJax/LaTeX无法渲染的问题

你遇到的问题根源是：MathJax默认只在页面初次加载时解析一次DOM结构，而renderUI是在页面加载完成后动态添加内容的，这些新生成的元素不会被MathJax自动识别并渲染。以下是针对你提供的示例的具体解决步骤：

解决步骤 #

1. 避免HTML转义：在Server端生成radioButtons的选项时，用HTML()函数包裹每个选项内容，防止Shiny自动转义MathJax的语法符号。
2. 触发MathJax重新排版：在动态内容生成完成后，调用MathJax的API重新解析当前DOM，把新增的LaTeX内容渲染出来。

修改后的完整代码 #

library(shiny)

ui <- fluidPage(
  
  tags$head(
    tags$script(
      type = "text/javascript",
      src = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
    )
  ),
  
  HTML("Next line is output originating from UI.R side  (Mathjax is displayed) <br>"),
  radioButtons("answer", "", choices = c(" \\( e^x \\) ", " \\( \\sum x_i \\) ")),
  
  br(),
  br(),
  HTML("<hr>"),
  HTML("<hr>"),
  HTML("Loop/output originating from server.R is going to start now: (Mathjax will display)"),
  br(),
  br(),
  uiOutput("questionsList")
)

server <- function(input, output) {
  
  output$questionsList <- renderUI({
    
    vector_choice <- c(" \\( e^x \\) ", " \\( \\sum x_i \\) ")
    # 用HTML包裹选项，避免转义MathJax语法
    vector_choice_html <- lapply(vector_choice, HTML)
    
    # 生成动态内容
    dynamic_content <- lapply(1:3, function(i) {
      html_text <- HTML(paste("<b>First text of Loop ", i, ":</b>", "$e^x$ $$e^y$$ \\( e^x \\)", "<br>"))
      
      fluidRow(
        column(width = 8,
               html_text,
               radioButtons(paste0("xanswer", i), "",
                            choices = vector_choice_html)
        )
      )
    })
    
    # 添加触发MathJax重新排版的脚本
    append(dynamic_content, list(
      tags$script("MathJax.Hub.Queue(['Typeset', MathJax.Hub]);")
    ))
  })
}

shinyApp(ui = ui, server = server)

关键说明 #

• lapply(vector_choice, HTML)：将每个选项转换为HTML对象，确保\( e^x \)这类MathJax语法不会被Shiny转义为普通文本。
• MathJax.Hub.Queue(['Typeset', MathJax.Hub])：通知MathJax重新对页面所有内容进行排版，让动态添加的LaTeX代码被正确渲染。

如果你的MathJax版本是3.x，触发语法需要改为MathJax.typeset()，但你当前使用的2.7.5版本完全适配上述代码。

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