RのShiny appでhtmlOutputを使ってシンタックスハイライトを有効にする方法

Question

私は、ユーザ入力に基づいてコンピュータコードを動的に生成し、それをユーザに提示してデータベースに送られるクエリを正確に見ることができるShinyアプリケーションを持っています。私はプリズムの構文が強調表示されているので、プリムが機能していることを知っています。サーバーで生成され、renderTextとhtmlOutputを経由してユーザーに送信されたコードの場合、強調表示は機能しません。ここ

単純な例の画像である：（光沢のあるアプリのwwwフォルダおよびprism.cssとprism.js）このRファイルを使用して作られた

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) 
} 

私は輝いている、第三（動作しない）チャンクによって生成されたWebページに <div class="shiny-html-output shiny-bound-output">内にあること、そして正しく <pre>と <code class="language-sql"> TAに包まれて見ることができますDOMエクスプローラで

最初のチャンクのようなgs。したがって、そのdivで囲まれていることは、prism.jsが強調表示することをやめさせることです。

3番目のチャンクを最初のようにハイライト表示するにはどうすればよいですか？

Answer 1

Prism.jsはロードされるとすぐに実行されるため、後で動的に追加されるコードブロックは強調表示されません。 1つのオプションは、サーバ機能にもprism.jsを動的にロードすることです。

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

しかし、これは非常に堅牢ではありません。スクリプトの複数のコピーを簡単に読み込むことができます。 shiny::singletonにするか、htmltools::htmlDependencyを使用してスクリプトを一度だけ読み込むと、元の状態に戻ることが容易にわかります。 -

より良い解決策は、プリズムを使用すると、プログラムでコードブロックを強調表示することができます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()を使用することができます。また、これらのプリズムコードブロックからHTMLウィジェットを作成して、面倒な詳細を抽象化することもできます。