Here are some advanced usage of markdown, Rmarkdown and HTML.

1 Layout

Raw HTML can be used to organise content into custom layout.

Use <div>content</div> for block content and <span>content</span> for inline content.

For example, here are two blocks:

<div>This is content A</div>
<div>This is content B</div>
This is content A
This is content B

For paragraphs, use <p>content</p>. And use classes text-left, text-center and text-right to align text left, center and right respganise content ectively.

<p class="text-right" style="background-color: aliceblue">This content is aligned right.</p>

This is regular paragraph.

<p class="text-center" style="background-color: aliceblue">This content is aligned center.</p>

This content is aligned right.

This is regular paragraph.

This content is aligned center.


Content can be organised into columns using pull-left-XX or pull-right-XX. Classes for 30, 40, 50, 60 and 70 have been implemented for left and right. Note that the total width must sum to 100.

<div class="pull-left-50" style="background-color: aliceblue">This content is pulled left.</div>
<div class="pull-right-50 text-center" style="background-color: aliceblue">This content is pulled right and text centered.</div>
This content is pulled left.
This content is pulled right and text centered. 


<div class="pull-left-30" style="background-color: aliceblue">This content is pulled left.</div>
<div class="pull-right-70" style="background-color: aliceblue">This content is pulled right.</div>
This content is pulled left.
This content is pulled right.


This is an example of nested columns.

<div class="pull-left-30" style="background-color: aliceblue">This column is pulled left.</div>
<div class="pull-right-70" style="background-color: aliceblue">
This column is pulled right.
<div class="pull-left-50" style="background-color: #d0ece7">
Nested left.
</div>
<div class="pull-right-50" style="background-color: #f2d7d5">
Nested right.
</div>
</div>
This column is pulled left.
This column is pulled right.

Nested left.

Nested right.


2 Extras

These are features implemented in this workshop material.

2.1 Icons

Icons can be placed directly into md or Rmd using HTML i-tag.

<i class="fas fa-lightbulb"></i>
<i class="fas fa-exclamation"></i>
<i class="fas fa-clipboard-list"></i>
<i class="fas fa-comments"></i>
<i class="fas fa-desktop"></i>
<i class="fas fa-cloud"></i>
<i class="fas fa-check"></i>
<i class="fas fa-times"></i>
<i class="fas fa-skull"></i>

Icons can also be placed programatically through R using the R package fontawesome.

`r fontawesome::fa('lightbulb')`

Optional arguments are height and fill.

`r fontawesome::fa('lightbulb',height='30px',fill='steelblue')`

For full list of icons check out FontAwesome.

2.2 Boxes

Highlighted instruction boxes can be created using a div with class boxy.

<div class="boxy">
This is some instruction.
</div>

This is some instruction.

Add colours to boxes.

<div class="boxy boxy-primary">
This is some instruction.
</div>

This is some instruction.

<div class="boxy boxy-orange">
This is some instruction.
</div>

This is some instruction.

<div class="boxy boxy-success">
This is some instruction.
</div>

This is some instruction.

<div class="boxy boxy-warning">
This is some instruction.
</div>

This is some instruction.

<div class="boxy boxy-danger">
This is some instruction.
</div>

This is some instruction.

<div class="boxy boxy-info">
This is some instruction.
</div>

This is some instruction.

Icons can be added to the boxes using pre-defined classes.

<div class="boxy boxy-lightbulb">
**Tip:** This is some instruction.
</div>

Tip: This is some instruction.

<div class="boxy boxy-primary boxy-lightbulb">
**Tip:** This is some instruction.
</div>

Tip: This is some instruction.

<div class="boxy boxy-orange boxy-exclamation">
**Warning:** This is some instruction.
</div>

Warning: This is some instruction.

<div class="boxy boxy-success boxy-check">
**Success:** This is some instruction.
</div>

Success:This is some instruction.

<div class="boxy boxy-warning boxy-clipboard-list">
**Task:** This is some instruction.
</div>

Task: This is some instruction.

<div class="boxy boxy-danger boxy-times">
**Error:** This is some instruction.
</div>

Error: This is some instruction.

<div class="boxy boxy-info boxy-comments">
**Discuss:** This is some instruction.
</div>

Discuss: This is some instruction.

Currently implemented icons for boxes are boxy-lightbulb () for tips, boxy-exclamation () for note, boxy-clipboard-list () for tasks, boxy-comments () for discuss, boxy-desktop () for desktop/local, boxy-cloud () for cloud, boxy-check () for correct, boxy-times () for wrong/false, boxy-skull () for danger.

2.3 Alerts

Note: This is a success alert!

Note: This is a danger alert!

Note: This is a warning alert!

Note: This is a info alert!

<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>

2.4 Block title

The code language can be displayed above input code by setting block.title=TRUE.

It can be placed above source block with output.

```{r,block.title=TRUE}
Sys.Date()
```
R 
Sys.Date()
## [1] "2021-04-28"

Or it can be placed above source block without output.

```{r,block.title=TRUE,eval=FALSE}
Sys.Date()
```
R 
Sys.Date()

Or above output block if the source is hidden. In this case, the title changes to OUTPUT.

```{r,block.title=TRUE,echo=FALSE}
Sys.Date()
```
Output 
## [1] "2021-04-28"

For instruction, it might be necessary to run some code and print the output as input-source-code. echo=FALSE hides the source code. comment="" hides the ## from print statements. class.output="r" code highlights the output block.

```{r,block.title=TRUE,echo=FALSE,comment='',class.output='r'}
cat('Sys.Date()')
```
r 
Sys.Date()

2.5 Accordion

2.5.1 Basic

Code can be hidden for interactive display using accordion=TRUE.

```{r,accordion=TRUE}
Sys.Date()
```

The above code creates the button below.

Sys.Date()
## [1] "2021-04-28"

Note that contents inside the accordion will NOT be printed (when minimised) on converting this HTML to PDF. Expanded accordion block will be printed when converting to PDF.

2.5.2 With custom colour

They can be given custom colours with chunk argument btn.type.

```{r,accordion=TRUE,btn.type='optional'}
Sys.Date()
``` 

Sys.Date()
## [1] "2021-04-28"
```{r,accordion=TRUE,btn.type='success'}
Sys.Date()
``` 

Sys.Date()
## [1] "2021-04-28"
```{r,accordion=TRUE,btn.type='warning'}
Sys.Date()
``` 

Sys.Date()
## [1] "2021-04-28"
```{r,accordion=TRUE,btn.type='danger'}
Sys.Date()
``` 

Sys.Date()
## [1] "2021-04-28"
```{r,accordion=TRUE,btn.type='info'}
Sys.Date()
``` 

Sys.Date()
## [1] "2021-04-28"

2.5.3 Inside custom div

Here are examples of accordions inside custom divs. Accordion buttons automatically take the colour of the parent boxy.

Challenge

If I create a vector as follows x <-c(5,3,9,"6"), what is the “type” of the element in the third position? Is it a number?

x <-c(5,3,9,"6")
typeof(x[3])
## [1] "character"

The third position is not a number, it’s a character. In fact, all elements in this vector are characters. If there is a character in a numeric vector, all elements are converted to characters (typeof(x)).

Optional

Compute mean of a vector 4,20,NA,6. What is the expected results?

x <-c(4,20,NA,6)
sum(x)
## [1] NA

To calculate sum without the NA, set na.rm=TRUE.

2.5.4 With additional text

If the accordion block is to contain regular text and code block, then the raw HTML code needs to be used. Below is an example.

<div class="boxy boxy-clipboard-list boxy-primary">

**Challenge**

If I create a vector as follows `x <-c(5,3,9,"6")`, what is the "type" of the element in the third position? Is it a number?

<p>
<button class="btn btn-sm btn-collapse collapsed" type="button" data-toggle="collapse" data-target="#task-vectors" aria-expanded="false" aria-controls="task-vectors">
</button>
</p>
<div class="collapse" id="task-vectors">
<div class="card card-body">


```r
x <-c(5,3,9,"6")
typeof(x[3])
```

```
## [1] "character"
```

<i class="fas fa-lightbulb"></i> The third position is not a number, it's a character. In fact, all elements in this vector are characters. If there is a character in a numeric vector, all elements are converted to characters (`typeof(x)`).

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

The above code creates the block below. Note that the variable task-vectors (used in 3 positions above) needs to changed to a unique value for each such block in a document. The code above renders as shown below.

Challenge

If I create a vector as follows x <-c(5,3,9,"6"), what is the “type” of the element in the third position? Is it a number?

x <-c(5,3,9,"6")
typeof(x[3])
## [1] "character"

The third position is not a number, it’s a character. In fact, all elements in this vector are characters. If there is a character in a numeric vector, all elements are converted to characters (typeof(x)).

Notice how the help text after the code chunk is also inside the accordion.

Here is another example.

<div class="boxy boxy-clipboard-list boxy-orange">
**Optional**

Compute mean of a vector `4,20,NA,6`. What is the expected results?

<p>
<button class="btn btn-sm btn-collapse-optional btn-collapse collapsed" type="button" data-toggle="collapse" data-target="#task-sum" aria-expanded="false" aria-controls="task-sum">
</button>
</p>
<div class="collapse" id="task-sum">
<div class="card card-body">


```r
x <-c(4,20,NA,6)
sum(x)
```

```
## [1] NA
```

<i class="fas fa-lightbulb"></i> To calculate sum without the NA, set `na.rm=TRUE`.

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

Optional

Compute mean of a vector 4,20,NA,6. What is the expected results?

x <-c(4,20,NA,6)
sum(x)
## [1] NA

To calculate sum without the NA, set na.rm=TRUE.

2.6 Blur panel

```{r,blur=TRUE}
Sys.Date()
``` 
Sys.Date()
## [1] "2021-04-28"