shinylive appearence in revealjs vs html

[richardjtelford]

Description

I am making shiny apps to go in revealjs with shinylive-r. With revealjs I get thick grey bands above and below the app which take up valuable space. If I render in html instead, I only get a thin grey line around the app. I much prefer this, but cannot work out what to change in the css to make the revealjs output look the same

This is a simplified document which shows the issue. There is live example at https://biostats-r.github.io/bio300B/lecture_6_descriptive.html#/section

---
format: 
  revealjs:
    resources: 
      - shinylive-sw.js
filters:
  - shinylive
---

```{shinylive-r}
#| standalone: true
#| viewerHeight: 600
library(shiny)

test_app <- function() {
  ui <- fluidPage(
      sliderInput("n", "number points:",min = 1,max = 100,value = 50),
    plotOutput("Plot")
  )
  shinyApp(ui = ui, server = test_server)
}
test_server <- function(input, output) {
  output$Plot <- renderPlot({
    plot(seq_len(input$n),  rnorm(input$n))
  })
}

test_app()
```

quarto_version: ‘1.10.18’

[mcanouil]

The grey bands don't come from your app or from the Shiny theme.

They come from a default in Reveal.js.
In slides, Quarto adds line numbers to code blocks.
That setting also applies to your shinylive-r block, so Quarto wraps it in a grey code box.
When the app loads, shinylive replaces the code inside that box, but the grey box itself stays behind.
The empty space above and below the app is the grey box showing through.

The HTML format doesn't add line numbers, so there's no grey box there.

You can turn line numbers off for the presentation:

---
format:
  revealjs:
    code-line-numbers: false
    resources:
      - shinylive-sw.js
filters:
  - shinylive
---

With that setting, the app in the slides looks like the HTML version, with just the thin border.

This turns line numbers off for every code block in the slides.
If you want them back on a plain code block, you can add the option to that block, for example ```{.r code-line-numbers="true"}.

[richardjtelford]

Thank you. This solves my problem.

However, I have few shinylive code blocks and many R code blocks, so it would be nice if the shinylive blocks obeyed the chunk option

```{shinylive-r}
#| code-line-numbers: false

Rather than having to set this as true in each R code block.

Or better still if code-line-numbers was set to false by default for shinylive code blocks in revealjs

[mcanouil]

That's for the shinylive extension to do and it might have been asked already:

• https://github.com/quarto-ext/shinylive/issues

[richardjtelford]

Thank you