Add CSS/JS assets to HTML output

Source: R/utils.R

While CSS/JS assets can be set via the css/js keys under the meta field of the html output format in YAML, this function provides another way to add them, which can be called in a code chunk to dynamically add assets.

vest(feature = NULL, css = NULL, js = NULL)

Arguments

feature

A character vector of features supported by CSS/JS, e.g., c('article', 'callout'). See the row names of litedown:::assets for all available features. Each feature will be mapped to CSS/JS.

css, js

Character vectors of CSS/JS assets.

Value

A vector of <link> (CSS) or <script> (JS) tags.

Examples

litedown:::assets[, -1]
#>                css               js                     
#> article        "@article"        "@sidenotes, @appendix"
#> book           "@book"           NA                     
#> callout        "@callout"        "@callout"             
#> center-img     NA                "@center-img"          
#> chapter-toc    NA                "@chapter-toc"         
#> copy-button    "@copy-button"    "@copy-button"         
#> default        "@default"        NA                     
#> external-link  NA                "@external-link"       
#> fold-details   NA                "@fold-details"        
#> heading-anchor "@heading-anchor" "@heading-anchor"      
#> key-buttons    "@key-buttons"    "@key-buttons"         
#> pages          "@pages"          "@pages"               
#> right-quote    NA                "@right-quote"         
#> snap           "@snap"           "@snap"                
#> tabsets        "@tabsets"        "@tabsets"             
#> toc-highlight  NA                "@toc-highlight"       
# add features
litedown::vest(c("copy-button", "tabsets"))
#> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xiee/utils@1.14.17/css/copy-button.min.css">
#> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xiee/utils@1.14.17/css/tabsets.min.css">
#> <script src="https://cdn.jsdelivr.net/npm/@xiee/utils@1.14.17/js/copy-button.min.js" defer></script>
#> <script src="https://cdn.jsdelivr.net/npm/@xiee/utils@1.14.17/js/tabsets.min.js" defer></script>
# add css/js directly
litedown::vest(css = "@tabsets", js = c("@tabsets", "@fold-details"))
#> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xiee/utils@1.14.17/css/tabsets.min.css">
#> <script src="https://cdn.jsdelivr.net/npm/@xiee/utils@1.14.17/js/tabsets.min.js" defer></script>
#> <script src="https://cdn.jsdelivr.net/npm/@xiee/utils@1.14.17/js/fold-details.min.js" defer></script>