Creating HTML documents in RStudio using R Markdown

Deena Iamsiri

2020-04-16

At some point during your academic and/or professional careers you will be required to write. For many this means using a word processor, but what if your document contained code, plots and tables of numbers? Simple right? That’s what Copy&Paste was invented for - imagine then that after getting the formatting perfect, the figures and tables in the right sections you find errors in the code and all the plots and tables need updating.

This is the reproducability problem of the above method and something that can be avoided by using RStudio and RMarkdown to write. For an interesting explanation of this see A reproducible workflow by Ignasi Bartomeus and Francisco Rodríguez-Sánchez.

This Vignette will help you write your own in a couple of ways:

  1. It is 100% reproducible so you can use it as a template
  2. Explain what and how things are done within the document

Opening a new R Markdown file

First open RStudio and navigate to File > New File > R Markdown - see Figure 1

Figure 1 - New File

Figure 1 - New File

Name your document and add your name to the document - see Figure 2

Figure 2 - R Markdown File

Figure 2 - R Markdown File

Then select an appropriate template, the Vignette template is used here - see Figure 3

Figure 3 - Vignette Template

Figure 3 - Vignette Template

Your screen should now show the blank template - see Figure 4

Figure 4 - RStudio Console

Figure 4 - RStudio Console

Now you should have a brand-new template to fill in.

Things commonly included in documents and how to do them

Now that you have your template open you may wish to employ some of these features;

Please Note Keystrokes for non-printing keys appear within round parenthesis.

Text formatting

Here are a few simple ways to format text in the document

Headings

Headings are easy to create in RMarkdown, below are some examples of the 6 differnet heading sizes and the syntax for creating them

Heading 1 Sample

#(space)Heading 1 Sample

Heading 2 Sample

##(space)Heading 2 Sample

Heading 3 Sample

###(space)Heading 3 Sample

Heading 4 Sample

####(space)Heading 4 Sample

Heading 5 Sample

#####(space)Heading 5 Sample

Heading 6 Sample

######(space) Heading 6 Sample

Lists

Ordered and Unordered lists are typed normally as you would see them the lists below show how this is done

  1. Item 1 - ordered list created by typing “1.(spacebar)item”
  2. Item 2
    1. Sub-item 2.i - created by typing “(tab)(tab)i.(spacebar)item”
    2. Sub-item 2.ii
  • Item - unordered created by typing "*(spacebar)item"
  • Next item
    • sub-item created by typing "*(tab)(tab)(spacebar)sub-item"

Quotes

A quote is added by using > this code produces the below quote with hyperlink:

’ >“Documentation is a love letter that you write to your future self.” ~ Damian Conway [AZ Quotes](<https://www.azquotes.com/quotes/topics/documentation.html>);’

“Documentation is a love letter that you write to your future self.” ~ Damian Conway (AZ Quotes)

Mathematic expressions, footnotes, tables, plots and code

You can write mathematic expressions: \(2\infty + >\) like this ‘$2\infty + > $’

Footnotes1 like this ‘footnotes^[This footer will be seen at the bottom of this document.]’, and tables using knitr::kable().

There are two styles that code can be presented; code chunks and inline code

This is what code chunk looks like, it has been customised so that you can easily put them side-by-side (Figure 5).

Figure 5 - side-by-side plots

Inline R code can be achieved by typing between single quotes and look like this when knitted: fig.cap = "Your figure caption." in knitr.

Adding images and embedded videos

You may wish to add images or embedded videos to your document

Adding images

This is code that adds and resizes an image from a file saved on a computer desktop, just replace the file path and file name with images you wish to use. Pro Tip .png are the best images for use in RMD for image sharpness.

![Caption for the picture.](C:\Users\abc\Desktop\imageName.png){width=80%}

Embedding videos from the internet

And here’s an example of an embedded video using HTML iframes in Figure 6

<iframe src=“YourWebAddress” width=“560” height=“315” frameborder=“0” allowfullscreen> </iframe>

Figure 6 - embedded youtube video

Finishing touches

After you’ve finished writing and formatting there’s only one thing left to do… Knit (Figure 7)

Figure 7 - Knit image

Figure 7 - Knit image

Spaces MATTER! And other helpful tips for beginners

Just some things I learnt:

Additional Resources

Helpful resources I used to put this together - read and enjoy!


  1. This footer will be at the bottom of this document.