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

Question

我有一个闪亮的应用程序，它根据用户输入动态生成计算机代码并将其呈现给用户，这样他们就可以准确地看到发送到数据库的查询是什么。我有 prism 语法高亮显示，适用于直接在用户界面函数中的代码，所以我知道 prism 正在工作；但是对于在服务器中生成并通过 renderText 和 htmlOutput 发送给用户的代码，突出显示不起作用。

这是一个简单示例的图像：

这是用这个 R 文件制作的（prism.css 和 prism.js 在 Shiny 应用程序的 www 文件夹中）

   ui <- shinyUI(fluidPage(
  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "prism.css")
  ),
  tags$body(
    tags$script(src="prism.js")
  ),
  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")
)
)


# Define the server code
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 <- renderText(txt)
}

在 DOM Explorer 中，我可以看到在 Shiny 生成的网页中，第三个（不工作的）块在 <div class="shiny-html-output shiny-bound-output"> 中，然后正确地包裹在 <pre> 中和 <code class="language-sql"> 标签，如第一个块。所以被包裹在 div 中是阻止 prism.js 做它突出显示的事情的原因。

我应该怎么做才能让第三个块像第一个一样突出显示？

Answer 1

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 小部件，以抽象出混乱的细节。

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

How to enable syntax highlighting in R Shiny app with htmlOutput

html

javascript

syntax-highlighting

shiny