Home > Software design >  Change the color for code embedded in markdown in shinydashboard shiny
Change the color for code embedded in markdown in shinydashboard shiny

Time:05-25

I have a shiny (shinydashboard) app that contains embedded markdown with a code chunk which displays in red by default. How can I change the color?

Here is a demo app:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    includeMarkdown("demo.md"),

  )
)

server <- function(input, output) { }

shinyApp(ui, server)

The markdown file demo.md has this line:

This is a `code` example.

That word "code" renders with a red font. I would like to change the color.

I messed around with extra lines in the app:

    tags$head(tags$style(HTML('
        .code {
          color: #000000;
        }
      ')))

and

tags$style(
  type = 'text/css', 
  '.code {color: black;}'
)

without success.

Can somebody tell me what I can add to the markdown or R file to change the color of the embedded code?

CodePudding user response:

As per the shinydashboard documentation, we can either use an external CSS file or just include them in the UI code. So, your first attempt is quite close but you just need to use the correct CSS selector.

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
        includeMarkdown("demo.md"),
        tags$head(tags$style(HTML("
            code {
                color: blue;
            }
        ")))
    )
)

server <- function(input, output) { }

shinyApp(ui, server)
  • Related