HTML

Misc

  • Packages

    • {htmltools} - Tools for creating, manipulating, and writing HTML from R
    • {bslib} - A modern UI toolkit for Shiny and R Markdown based on Bootstrap
    • {cascadess} - A Style Pronoun for htmltools Tags; Also use with {bslib}

  • Resources

  • Pandoc command to convert .md to .html

    pandoc --toc --css=https://bootswatch.com/5/cerulean/bootstrap.min.css \
    -s -o index.html index.md

  • Some JS libraries use custom attributes in html tags that have hyphens in their name. R hates hypens, but you can just put the attribute name in quotes and it works (e.g. data-sub-html).

    # see data-sub-html
tags$a(
  href = paste0("images/gallery/large/", l),
  "data-sub-html" = "<h4>Photo by - <a href='https://unsplash.com/@entrycube' >Diego Guzmán </a>",
  tags$img(src = paste0("images/gallery/thumbnails/", t))
  )

  • glue("<b style='background-color:{color}; font-family:Roboto; font-size:15px'>{value}</b>")

    • color and value are variables

  • glue("<b style= 'font-family:Roboto; font-size:15px'>{name}</br>Combined Indicator</b>: {value_text}")

    • name and value_text are variables

  • html coment - <!-- comment -->

  • withTags - Instead of needing to specify tags each time a tag function is used, as in tags\(div() and tags\)p(), code inside withTags is evaluated with tags searched first, so you can simply use div() and p().

  • tagList - takes a list of tag objects and combines them into html code

  • Example: From my website gallery

    • html

      <!---- withTags part ---->
<div class="row" id="lightgallery">
  <!---- tagsList part ---->
  <a href="_gallery/img/images/gallery/large/excess-death-col.png">
    <img src="_gallery/img/images/gallery/thumbnails/thumb-excess-death-col.png"/>
  </a>
  <a href="_gallery/img/images/gallery/large/pos-policy-one-2021-06-20.png">
    <img src="_gallery/img/images/gallery/thumbnails/thumb-pos-policy-one-2021-06-20.png"/>
  </a>
</div>

    • {htmltools}

      • Create list of tags

        # images_thumb, images_full_size are paths to png files
moose <- 
  purrr::map2(images$images_thumb, images$images_full_size, 
    function(t, l) {
      tags$a(
        href = paste0("_gallery/img/", l),
                      tags$img(src = paste0("_gallery/img/", 
                      t))
      )
    })

#> [[1]]
#> <a href="_gallery/img/images/gallery/large/excess-death-col.png">
#> <img src="_gallery/img/images/gallery/thumbnails/thumb-excess-death-col.png"/>
#> </a>

#> [[2]]
#> <a href="_gallery/img/images/gallery/large/pos-policy-one-2021-06-20.png">
#> <img src="_gallery/img/images/gallery/thumbnails/thumb-pos-policy-one-2021-06-20.png"/>
#> </a>

      • Convert list of tags to code with tagsList

        squirrel <- tagsList(moose)

#> <a href="_gallery/img/images/gallery/large/excess-death-col.png">
#> <img src="_gallery/img/images/gallery/thumbnails/thumb-excess-death-col.png"/>
#> </a>
#> <a href="_gallery/img/images/gallery/large/pos-policy-one-2021-06-20.png">
#> <img src="_gallery/img/images/gallery/thumbnails/thumb-pos-policy-one-2021-06-20.png"/>
#> </a>

      • Insert into a div frame with withTags

        withTags(
  div(
    class = "row",
    id = "lightgallery",
    squirrel
  )
)
#> <div class="row" id="lightgallery">
#>    <a href="_gallery/img/images/gallery/large/excess-death-col.png">
#>        <img src="_gallery/img/images/gallery/thumbnails/thumb-excess-death-col.png"/>
#>    </a>
#>    <a href="_gallery/img/images/gallery/large/pos-policy-one-2021-06-20.png">
#>        <img src="_gallery/img/images/gallery/thumbnails/thumb-pos-policy-one-2021-06-20.png"/>
#>    </a>
#> </div>