I was a long-time a \(\LaTeX\) user before using (R)markdown. And I missed using \(\LaTeX\)-like commands to generate custom html. So I wrote some functions to do so.

Commands (inline)

• linebreak()

For example, the linebreak function creates a break with a specified height.

linebreak <- function(height="10pt"){
  html <- shiny::tags$hr(style="height:%s; visibility:hidden;")
  sprintf(as.character(html), height)
}

Html output:

<hr style="height:10pt; visibility:hidden;"/>

Usage example:

Hello. There is a `r linebreak()` here.

Output:

Hello. There is a

here.

• textcolor()

Remark: There is a nice way to generate a html style option like this:

<span style="color:red;border-style:solid;border-width:3px;border-color:seaShell;background-color:#FCDFFF;font-size:25px">*Remark:*</span>

by setting the styles in a list:

mystyle <- list(color="red", "border-style"="solid")

and then doing:

do.call(function(...) sprintf(paste(c(names(mystyle), ""), collapse = ":%s;"), ...), unname(mystyle))
[1] "color:red;border-style:solid;"

This is the way used by my textcolor() function:

textcolor <- function(text, style=list(color="red")){
  sprintf('<span style="%s">%s</span>', 
          do.call(function(...) sprintf(paste(c(names(style), ""), collapse = ":%s;"), ...), unname(style)), 
          text)
}

Usage example:

Hello. There is some `r textcolor("text in color here", list(color="red", "font-size"="25px"))`.

Output:

Hello. There is some text in color here.

Html output:

<span style="color:red;font-size:25px;">text in color here</span>

Environments (in chunk)

• codechunk()

codechunk <- function(text, style=list(color="red")){
  cat(
    sprintf('<pre><code class="r" style="%s">%s</code></pre>', 
            do.call(function(...) sprintf(paste(c(names(style), ""), collapse = ":%s;"), ...), unname(style)), 
            code))
}

Usage example:

```{r, results="asis"}
code <- "x <- 1:2
y <- x^2"
codechunk(code, style=list("font-size"="150%", "background-color"="#FCDFFF"))
```

Output:

x <- 1:2
y <- x^2

Html output:

<pre><code class="r" style="font-size:150%;background-color:#FCDFFF;">x <- 1:2
y <- x^2</code></pre>

• htmlbox()

This box depends on a default css where the title_box class is defined.

htmlbox <- function(title, body, style.title=""){
  html <- shiny::withTags(
    div(class="title_box",
      div(id="title", style="%s", "%s"),
      div(id="content", "%s")
    )
  )
  if(is.list(style.title)){
    style.title <- do.call(function(...) sprintf(paste(c(names(style.title),""), collapse=":%s;"), ...), unname(style.title))
  }
  cat(sprintf(as.character(html), style.title, title, body))
}

Usage example:

```{r, results="asis"}
title <- "A quote by Bertrand Russell"
body <- "A man who has once perceived, however temporarily and however briefly, what makes greatness of soul, can no longer be happy if he allows himself to be petty, self-seeking, troubled by trivial misfortunes, dreading what fate may have in store for him. The man capable of greatness of soul will open wide the windows of his mind, letting the winds blow freely upon it from every portion of the universe.

He will see himself and life and the world as truly as our human limitations will permit; realizing the brevity and minuteness of human life, he will realize also that in individual minds is concentrated whatever of value the known universe contains. And he will see that the man whose mind mirrors the world becomes in a sense as great as the world. In emancipation from the fears that beset the slave of circumstance he will experience a profound joy, and through all the vicissitudes of his outward life he will remain in the depths of his being a happy man."
htmlbox(title, body, style.title=list(color="blue"))
```

Output:

A quote by Bertrand Russell

A man who has once perceived, however temporarily and however briefly, what makes greatness of soul, can no longer be happy if he allows himself to be petty, self-seeking, troubled by trivial misfortunes, dreading what fate may have in store for him. The man capable of greatness of soul will open wide the windows of his mind, letting the winds blow freely upon it from every portion of the universe.

He will see himself and life and the world as truly as our human limitations will permit; realizing the brevity and minuteness of human life, he will realize also that in individual minds is concentrated whatever of value the known universe contains. And he will see that the man whose mind mirrors the world becomes in a sense as great as the world. In emancipation from the fears that beset the slave of circumstance he will experience a profound joy, and through all the vicissitudes of his outward life he will remain in the depths of his being a happy man.

Html output:

<div class="title_box">
  <div id="title" style="color:blue;">A quote by Bertrand Russell</div>
  <div id="content">A man who has once perceived, however temporarily and however briefly, what makes greatness of soul, can no longer be happy if he allows himself to be petty, self-seeking, troubled by trivial misfortunes, dreading what fate may have in store for him. The man capable of greatness of soul will open wide the windows of his mind, letting the winds blow freely upon it from every portion of the universe.

He will see himself and life and the world as truly as our human limitations will permit; realizing the brevity and minuteness of human life, he will realize also that in individual minds is concentrated whatever of value the known universe contains. And he will see that the man whose mind mirrors the world becomes in a sense as great as the world. In emancipation from the fears that beset the slave of circumstance he will experience a profound joy, and through all the vicissitudes of his outward life he will remain in the depths of his being a happy man.</div>
</div>

Default css:

.title_box { 
  display: block;
  border: 1px dotted darkRed; 
  border-radius: 50px;
    width: 90%;
    background-color: white;
    left: 60px;
    position: relative;
    margin-top: 60px;
}
.title_box #title { 
    border: 1px dotted darkRed;
    border-radius: 10px;
  position: relative; 
    padding: 5px 5px 5px 5px;
  top : -0.5em;
  margin-left: 2em;
  display: inline; 
  background-color: seaShell; 
    font-family: Calibri;
    color: darkRed;
    font-style:italic;
}
.title_box #content {
    padding: 5px 25px 25px 25px;
    line-height: 28px;
    color: darkRed;
    font-family: Georgia,'Comic Sans';
    font-style:italic;
}")