如何使用htmlOutput在R Shiny应用程序中启用语法突出显示

Prism.js在加载后立即运行，因此以后动态添加的任何代码块都不会突出显示。一种选择是也可以prism.js动态加载服务器功能。

output$sql <- renderUI({
  tagList(
    tags$script(src = "prism.js"),
    HTML(txt)
  )
})

但这不是很可靠。您可以轻松加载脚本的多个副本。而且，如果将其设置为shiny::singleton或htmltools::htmlDependency仅用于加载脚本一次，则很容易回到原来的状态。

更好的解决方案-Prism提供了一个API，可让您以编程方式突出显示代码块：http : //prismjs.com/extending.html#api

Prism.highlightAll()渲染任何代码块后运行如何？

library(shiny)

prismCodeBlock <- function(code) {
  tagList(
    HTML(code),
    tags$script("Prism.highlightAll()")
  )
}

prismDependencies <- tags$head(
  tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.4/prism.min.js"),
  tags$link(rel = "stylesheet", type = "text/css",
            href = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.4/themes/prism.min.css")
)

prismSqlDependency <- tags$head(
  tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.4/components/prism-sql.min.js")
)

ui <- fluidPage(
  prismDependencies,
  prismSqlDependency,

  HTML("<pre><code class='language-sql'>SELECT * FROM mytable WHERE 1=2
       -- this chunk should be syntax highlighted and it is
       </code></pre>"),

  HTML("<pre>SELECT * FROM mytable WHERE 1=2
       -- this chunk should not be syntax highlighted
       </code></pre>"),

  htmlOutput("sql")
)

server <- function(input, output) {
  txt <- "<pre><code class='language-sql'>SELECT * FROM mytable WHERE 1=2
  -- this chunk should be syntax highlighted but isn't for some reason,
  -- presumably connected to it getting to the UI via renderText and htmlOutput
  </code></pre>"

  output$sql <- renderUI({
    prismCodeBlock(txt)
  })
}

shinyApp(ui, server)

为了进一步改善，您可以使用Prism.highlightElement()它来提高效率。也可以从这些Prism代码块中创建HTML小部件，以抽象出混乱的细节。