tags $ pre为每个div添加空格

Question

有人知道为什么tags$pre为每个嵌套的div添加空格？

runApp(list(
  ui = bootstrapPage(
    tags$pre("Line 1","Line 2"),
    div(tags$pre("Line 1","Line 2")),
    div(div(tags$pre("Line 1","Line 2")))
  ),
  server = function(input, output) { }
))

在检查浏览器中的元素后，似乎tags$pre根据tags$pre函数的深度在每行的开头添加空格。请注意，在此简化代码中，我可以删除div's，但我需要div's。

如何为每个pre提供相同的保证金？

Answer 1

我发现这是有效的：

runApp(list(
  ui = bootstrapPage(
    tags$pre("Line 1\nLine 2"),
    div(tags$pre("Line 1\nLine 2")),
    div(div(tags$pre("Line 1\nLine 2")))
  ),
  server = function(input, output) { }
))

正如here所述，pre标记尊重格式，因此请通过直接插入所需的字符串来避免使用html格式规则。

Answer 2

这是因为pre标签保留了所有空格（pre = preformatted），而Shiny会自动将HTML代码格式化为人类可读的缩进。

如果有兴趣，你可以通过挖掘一下闪亮的/ htmltools找出罪魁祸首。我想验证这一点，所以我发现了这种情况。

> mytag <- div(div())

> mytag
<div>
  <div></div>
</div> 

是的，看起来像是用缩进打印的。那么让我们看一下所谓的打印方法

> class(mytag)
[1] "shiny.tag"

> getS3method("print", "shiny.tag")
function (x, browse = is.browsable(x), ...) 
{
    if (browse) 
        html_print(x)
    else print(as.character(x), ...)
    invisible(x)
}
<environment: namespace:htmltools>

重定向到as.character，让我们看看它做了什么

> getS3method("as.character", "shiny.tag")
function (x, ...) 
{
    renderTags(x)$html
}
<environment: namespace:htmltools>

重定向到renderTags，让我们看看那里

> htmltools:::renderTags
function (x, singletons = character(0), indent = 0) 
{
    x <- tagify(x)
    singletonInfo <- takeSingletons(x, singletons)
    headInfo <- takeHeads(singletonInfo$ui)
    deps <- resolveDependencies(findDependencies(singletonInfo$ui))
    headIndent <- if (is.numeric(indent)) 
        indent + 1
    else indent
    headHtml <- doRenderTags(headInfo$head, indent = headIndent)
    bodyHtml <- doRenderTags(headInfo$ui, indent = indent)
    return(list(head = headHtml, singletons = singletonInfo$singletons, 
        dependencies = deps, html = bodyHtml))
}
<environment: namespace:htmltools>

确实如此。缩进发生在这里

只是为了确定，让我们测试一下

> htmltools:::renderTags(mytag, indent = 5)
$head


$singletons
character(0)

$dependencies
list()

$html
          <div>
            <div></div>
          </div> 

神秘解决了