rshinyrenderuiuioutput

Formatting colour of dynamic text generated from renderUI in Shiny


I wish to colour the dynamically generated text that comes from renderUI. A minimal extract of my code is here:

library(shiny)
library(Ryacas)
library(Ryacas0)
library(mathjaxr) # for rendering Latex expressions in Shiny

# Define UI for application that draws a histogram
ui <- fluidPage(
  withMathJax(uiOutput("entered1")),
  withMathJax(uiOutput("entered2"))
)

server <- function(input, output) {
  output$entered1 = renderUI({
    withMathJax(
      helpText(
        paste0("f(x) = \\(", yac_str(paste0("TeXForm(Sin(x))")), "\\)")
      )
    )
  })
  
  output$entered2 = renderUI({
    withMathJax(
      helpText(
        paste0("f(x) = \\(", yac_str(paste0("TeXForm(Cos(x))")), "\\)")
      )
    )
  })
  
}
  # Run the application 
  shinyApp(ui = ui, server = server)

In the full code, the functions 'sin(x)' and 'cos(x)' are dynamically changing, but in this help request, they are static.

I wish to have it so that 'f(x) = sin(x)' is displayed in red text, and 'f(x) = cos(x)' is displayed in blue text.

I do not wish to use CSS if I can help it. I'd like to know where to put the 'style = color:red' (etc) tags in my code, or whatever the equivalent is. I've looked everywhere for a simple explanation, but I've found nothing that I can easily use.

I don't know whether to put some tags in the UI or whether to include the style information on server side. I've looked at the renderUI's syntax of outputArgs, but there are virtually no decent examples out there that can help me.

I welcome anyone's help.


Solution

  • You can use the MathJax command \color:

    library(shiny)
    library(Ryacas)
    
    ui <- fluidPage(
      helpText(withMathJax(uiOutput("entered1", inline = TRUE))),
      helpText(withMathJax(uiOutput("entered2", inline = TRUE)))
    )
    
    server <- function(input, output) {
      output$entered1 = renderUI({
        paste0("\\( \\color{red}{f(x) = ", yac_str("TeXForm(Sin(x))"), "}\\)")
      })
      
      output$entered2 = renderUI({
        paste0("\\( \\color{blue}{f(x) = ", yac_str("TeXForm(Cos(x))"), "}\\)")
      })
      
    }
    # Run the application 
    shinyApp(ui = ui, server = server)
    

    enter image description here