replicate shiny verbatimTextOutput as htmlOutput in order to markup inline text with <span> tag

Question

I need to produce an output of medical notes, monospace format, and the verbatimTextOutput is ideal... EXCEPT that I can't dynamically highlight terms. Some of these notes are pages long, and people need to scan them quickly for specific terms, keeping all spacing and indents intact.

Is it possible to use a div or p tag to replicate the bordered box output of the <pre> tag associated with verbatimTextOutput() in order to append a span tag that changes font color and background color, e.g. my <span class="mymarkup">marked up</span> text?

I was able to reproduce the verbatimTextOutput() behavior by wrapping the text with:

HTML('<pre class="shiny-text-output noplaceholder shiny-bound-output" id="notes-uiNoteContents" aria-live="polite">my <span class="notespan">marked up</span> text</pre>')

And I declared the css in a tags$style argument in the header:

.notespan { color: red !important; background-color: white !important;  }

But shiny still isn't applying the style I'm adding to the text since the <pre> tag obviously produces the verbatim text:

my <span class="notespan">marked up</span> text

I could probably declare a div class, but I have no idea how to scour the shiny css styles to determine what goes into the classes defined in the pre tag above, and how to disentangle the classes from any wrapped classes inside the dynamically populated fluidRow() and column() div classes.

Answer 1

I don't see what you mean because this works:

library(shiny)

ui <- fluidPage(
  br(),
  HTML('<pre class="shiny-text-output noplaceholder" id="notes-uiNoteContents" aria-live="polite">my <span style="color: red;">marked up</span> text</pre>'),
  tags$pre(
    class = "shiny-text-output noplaceholder", 
    uiOutput("test", inline = TRUE)
  )
)

server <- function(input, output){
  output$test <- renderUI({
    HTML('my <span style="color: red;">marked up</span> text')
  })
}

shinyApp(ui, server)