2017-11-22 4 views
1

나는 사용자 입력을 기반으로 컴퓨터 코드를 동적으로 생성하고 사용자에게 제시하여 정확히 어떤 쿼리가 데이터베이스로 보내지는지를 볼 수있는 Shiny 앱을 가지고 있습니다. 필자는 프리즘 구문이 사용자 인터페이스 함수에 직접있는 코드에서 작동한다는 것을 강조하므로 프리즘이 작동하고 있다는 것을 알고 있습니다. 서버에서 생성되어 renderTexthtmlOutput을 통해 사용자에게 전송 된 코드의 경우 강조 표시가 작동하지 않습니다. 여기 R에서 구문 강조 표시를 사용하는 방법 htmlOutput을 사용하는 반짝이는 응용 프로그램

간단한 예의 이미지 (반짝이 앱 www 폴더 및 prism.css 및 prism.js)이 R 파일

만들어졌다

enter image description here

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"> ta로 감싸는 것을 볼 수 있습니다 gs는 첫 번째 청크와 같습니다. 그래서 div에 싸인 것은 prism.js가 강조하는 것을 멈추는 것입니다.

세 번째 청크를 첫 번째 청크처럼 강조 표시하려면 어떻게해야합니까?

답변

3

Prism.js가로드되는 즉시 실행되므로 이후에 동적으로 추가 된 코드 블록이 강조 표시되지 않습니다. 하나의 옵션은 동적으로 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 위젯을 생성하여 어수선한 세부 사항을 추상화 할 수 있습니다.

+0

대단히 감사합니다. 완벽하게 작동했습니다. –

관련 문제