Javascript 如何使用htmlOutput在R Shining应用程序中启用语法高亮显示
我有一个闪亮的应用程序,它根据用户输入动态生成计算机代码,并将其呈现给用户,以便用户能够准确地看到向数据库发送的查询。我有prism语法高亮显示,用于直接在用户界面函数中的代码,因此我知道prism正在工作;但是对于在服务器中生成并通过renderText和htmlOutput发送给用户的代码,高亮显示不起作用 下面是一个简单示例的图像: 它是用这个R文件和Shining应用程序的www文件夹中的prism.css和prism.js制作的Javascript 如何使用htmlOutput在R Shining应用程序中启用语法高亮显示,javascript,html,shiny,syntax-highlighting,Javascript,Html,Shiny,Syntax Highlighting,我有一个闪亮的应用程序,它根据用户输入动态生成计算机代码,并将其呈现给用户,以便用户能够准确地看到向数据库发送的查询。我有prism语法高亮显示,用于直接在用户界面函数中的代码,因此我知道prism正在工作;但是对于在服务器中生成并通过renderText和htmlOutput发送给用户的代码,高亮显示不起作用 下面是一个简单示例的图像: 它是用这个R文件和Shining应用程序的www文件夹中的prism.css和prism.js制作的 ui <- shinyUI(fluidPag
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)
}
,
HTML,
htmlOutputsql
定义服务器代码
服务器Prism.js在加载后立即运行,因此随后动态添加的任何代码块都不会突出显示。一种选择是在服务器函数中动态加载prism.js , HTML, htmlOutputsql 服务器
output$sql <- renderUI({
tagList(
tags$script(src = "prism.js"),
HTML(txt)
)
})
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)