javascript - Shiny 的模态窗口不接受 js 和 css

Question

所以我的 Shiny 应用程序显示代码。我想显示格式化代码，所以我使用了 highlight js 库。我让它在模态窗口外工作，而不是在它里面。 modalDialog 函数似乎不接受我的 css 和 js 输入。

有效的代码块，没有模态窗口:

library(shiny)
shinyApp(
  ui = basicPage(
    includeScript("/Users/stani/GitHub/bamlss.vis/inst/srcjs/highlight.pack.js"),
    includeCSS("/Users/stani/GitHub/bamlss.vis/inst/srcjs/default.css"),
    HTML('<script>hljs.initHighlightingOnLoad();</script>'),
    tags$pre(tags$code('
                       for (i in 1:10) {
                       print(i)
                       }'))
  ),
  server = function(input, output) {}
)

输出看起来像this ，我们可以看到格式化有效。

但是，当我使用这段代码显示模态窗口时，它不起作用:

library(shiny)

shinyApp(
  ui = basicPage(
    actionButton("show", "Show modal dialog")
  ),
  server = function(input, output) {
    observeEvent(input$show, {
      showModal(modalDialog(
        title = "Important message",
        # Include JS, CSS for syntax highlighting
        includeScript("/Users/stani/GitHub/bamlss.vis/inst/srcjs/highlight.pack.js"),
        includeCSS("/Users/stani/GitHub/bamlss.vis/inst/srcjs/default.css"),
        HTML('<script>hljs.initHighlightingOnLoad();</script>'),
        tags$pre(tags$code('
for (i in 1:10) {
  print(i)
}'))
      ))
    })
  }
)

相反，输出看起来像 this .我们可以看到代码显示了但没有格式化。为什么？

Answer 1

问题是读取js脚本的时机不对。它必须在通用 UI 中调用。如果有人遇到同样的问题，这是我的解决方案:

library(shiny)

shinyApp(
  ui = basicPage(
    includeCSS("/Users/stani/GitHub/bamlss.vis/inst/srcjs/default.css"),
    includeScript("/Users/stani/GitHub/bamlss.vis/inst/srcjs/highlight.pack.js"),
    actionButton("show", "Show modal dialog")
  ),
  server = function(input, output) {
    observeEvent(input$show, {
      showModal(modalDialog(
        title = "Important message",
        # Include JS, CSS for syntax highlighting
        tags$pre(tags$code('
                           for (i in 1:10) {
                           print(i)
                           }')),
        HTML('<script>$("pre code").each(function(i, block) {
          hljs.highlightBlock(block);
        });</script>')
      ))
    })
  }
)