当包含Markdown时，调整Shiny主面板的宽度

Question

我正在尝试在Shiny应用程序中包含一个"反应性"的.Rmd文件。它将总结用户的选择和可能出现的各种情况。不知何故，我发现在.Rmd文件中包含shiny是可行的documented，但无法包含knit .Rmd并将输出包含在shiny应用程序中。

我发现这些很难复制，所以这里是我使用Rstudio的hello world示例进行尝试的结果。这是在Chromium中的应用程序原样：

接下来，我在 ui.R 中添加了一个 uiOutput 元素：

# Show a plot of the generated distribution
mainPanel(
  plotOutput("distPlot"),
  uiOutput("mark")
)

我还在server.R中添加了一个相应的输出，取自这种类似问题的内容：

output$mark <- renderUI({

  HTML(markdown::markdownToHTML(knit("./test.Rmd", quiet = TRUE)))

})

test.Rmd的内容如下：

## something to print

```{r}

head(mtcars, input$bins)

```

当我运行它时，现在会得到这个（屏幕截图足迹相同）：

我猜测在编织文档中有一些CSS或其他东西会搞砸事情，但我不确定。我可以强制宽度更宽，但主面板仍然保持居中。

---

我尝试过使用includeMarkdown，但无法根据input进行更新。请记住，这是最终的希望 - 我需要一些能够根据更改的input值重新生成显示内容的东西。我意识到我可以做一些renderText之类的事情，但Rmarkdown格式非常方便，因为这是一种指南。我可以编写一些文档，然后向用户展示他们选择了什么以及结果如何。

看起来很接近...我只是想不出为什么页面会出问题。

我还尝试了像style = "width: 1200px"或style = "width: 100%"之类的东西，但无法将sidebarPanel和mainPanel之间的比例恢复正常。

理想情况下，输出应该与原始输出完全相同，但编织结果应该显示在图的当前位置下面。

- Hendy

Answer 1

看起来，rmd代码将以下属性添加到body元素中：

max-width: 800px;

为了移除这个问题，将以下内容添加到您的ui代码中（例如在sliderInput下面）:

     tags$head(tags$style(HTML("
                               body {
                                  width: 100% !important;
                                  max-width: 100% !important;
                               }

                               ")))

- Xiongbing Jin

---

天才！你是怎么找到的？？我在闪亮应用程序上搜索了源代码，但没有看到它。我刚刚编织了 test.Rmd 文件，然后我看到了 .main-container { max-width: 940px; }。这非常有效。现在我知道我在寻找什么，我甚至能够控制只有一个输出：例如 div [id = blah] {max-width: 100% !important;}。真诚感谢您快速的调查。 - Hendy

我通常使用Firefox的“检查元素”上下文菜单来查找与每个元素相关的样式。非常容易和方便使用。 - Xiongbing Jin

Answer 2

在markdownToHTML中设置fragment.only=TRUE：

output$mark <- renderUI({

  HTML(markdown::markdownToHTML(knit("./test.Rmd", quiet = TRUE), fragment.only=TRUE))

})

- Stéphane Laurent