Modified readthedown RMarkdown template for stylish analytical documents

In previous post, I shared how to effectively use various packages to create htmlwidget to build interactive analytical documents in readthedown template, which I enjoyed for the most of time. However I feel tedious that I need copy the same yaml configuration, css code, setup R chucks every time for new projects. That’s the motivtaion of this modified readthedown rmarkdown template is to ease the process of creating documents with the same style. It offers out-of-box template with predefined styles, configurations and is greatly inspired and modified based on juba/rmdformats package. Now, all you need is just a few clicks on Rstudio menu to start a fresh template.

What’s New

1. Included logos
   created two placeholders for logos. logo is located at top-left corner in the sidebar, logo2 is located at the top-right corner of the content. The logo and logo2 are wrapped inside a div container with class logo and logo2 respectively. This will be helpful when we need adjust the logo size in the css file.
2. Included favicon
   favicon is pretty small thing, but it’s cool to share the html document that has your own icon instead of a “grey globe”. The favicon option is made available in the yaml and can be easily replaced with your own favicon image.
3. Improved author profile section
   added a avatar option under auther, which can be easily defined at the rmarkdown yaml header.
4. Colored block quote
   to differentiate level of attention of the block quote, css classes of info, warn and err are created to show in different color.
5. Fixed css style for details & summary
   details tag is useful html element to display or hide detail information. The expanding triagnle is somehow masked by the other setting in the origin template. A fix is applied to resolove it.
6. Handy css classes for mulitple columns
   predefined css classes to make it easier to show plots, tables in multiple columns layout side by side. It’s more clear to check out the default template from the package.

YAML configuration from readthedown

title: "Readthedown Example"
date: "`r Sys.Date()`"
author: 
  - name: "Liu Chaoran <6chaoran@gmail.com>"
    avatar: ./logo/avatar.png
    title: Data Scientist
output:
  readthedown::readthedown:
    highlight: kate
    fig_width: 14
    fig_height: 8
    number_sections: true
    code_folding: none
    logo: ./logo/logo.png
    logo2: ./logo/logo2.png
    favicon: ./logo/favicon.png
    css: style.css

Futher Customization

If the current template can’t satisify you, you should try to modify the style.css file in the default logo directory. Some simple settings (e.g. background color, font size) can be easily changed with some basic knowledge of css. Alternatively, W3 School is good choices to copy some codes from.

#content {
  max-width: 95%;
}

#sidebar > h2 {
  background-color: darkblue;
}

.logo {
  background-color: darkblue;
}

h1, h2, h3 {
  color: darkblue;
}
/* some other css settings ... */

Rendered HTML document

The out-of-box RMarkDown template can be rendered to the following HTML document. Should you check out the package and the template, if this is interesting to you.