Jie Wang

4 minute read

This post has been generated for testing how to publish an R Markdown document with the tutorial package in a Jekyll blog. The post page examines MathJax (described at R Markdown site), and DataCamp-light. There must bave simpler ways to do this, but this is one solution which works.

  • Basically, create a new R Markdown document, .Rmd, in RStudio.

  • Paste the typical front matter of your Jekyll post.

  • In the R Markdown file, Add additional YAML metadata items as needed for customizing the output format and formatting stuff.

  • Save the Rmd file in a subdirectory, for example, _rmd_html, of the Jekyll site.

  • Run the command rmarkdown::render("*.Rmd") to convert the Rmd document to a markdown document.

  • Modify the md document to make it compatible with Jekyll markdown.

  • Manually put the document dependencies for MathJax and Datacamp-light into the Jekyll post layout scripts.

  • Finally, build the Jekyll site with the R command system2("jekyll"," build").

The Front Matter of Rmd

---
layout: post
featured: false
comments: true
title: "R Markdown Post in a Jekyll Site"
date:   2017-12-23 01:45:03 -0600
author: "Your name here"
url: /[data_science_and_data_mining]/2017/12/23/R-tutorial-test.html
categories: [data_science_and_data_mining]
tags: [R,report,R_Markdown]
output:
  html_document:
    keep_md: true
    mathjax: default
    self_contained: false
    lib_dir: libs
---

MathJax Equations

When rendering Rmd to HTML, RMarkdown::render will place the following script block for MathJax to show mathematics in the output HTML document.

<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src  = "https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script>

The script tag will load the latest version of MathJax from the official MathJax CDN, and configure it to recognize mathematics in TeX, MathML and AsciiMath notation. It will generate the output using HTML with CSS to display the mathematics in the page.

In a Jekyll site, move the script block above to the post page either in its header or body section. In a Jekyll site, it can be either a layout script, such as default.html in the directory ‘_layout’ or an included block, such as post_header.html in the directory _includes.

Equation

$$$$ is the delimiters for equations. The following md snippet in the R Markdown document

$$
\begin{eqnarray}
SE &= & \sum_{i=1}^n({\hat y_i}-y_i)^2  
   &= & \sum_{i=1}^n(ax_i + b -y_i)^2 \tag{1}
\end{eqnarray}
$$

will display the equation:

$$\begin{eqnarray} SE &= & \sum_{i=1}^n({\hat y_i}-y_i)^2
&= & \sum_{i=1}^n(ax_i + b -y_i)^2 \tag{1} \end{eqnarray}$$

Inline Equation

$…$ is for inline equations in R Markdown, but Jekyll only recognizes \\( \\). Jekyll will render the following md line

With the linear model above, each \\(x\\) will produce a fitted value \\({\hat y}\\). 

to:

With the linear model above, each \(x\) will produce a fitted value \({\hat y}\).

DataCamp-light

Suppose that the tutorial package has been installed in R. In an R Markdown file, add the following code chunk to invoke the tutorial package which converts code chunks into an interactive experiment in an iframe.

{r, include=FALSE} 
 tutorial::go_interactive() 

As self-contained is set to false, R Markdown will put the following two extra lines in the beginning of the md document, for linking the required datacamp-light JavaScript library.

<script src="https://cdn.datacamp.com/datacamp-light-latest.min.js"></script>

The extra lines will prevent Jekyll from reading metadata. To solve the problem, we can

Remove the first two lines from the md document.

Put the script block above to the layout document either in the header or body section of a post.

In a Jekyll site, it can be either a layout script, such as default.html in the directory _layout or an included block, such as post_header.html in the directory _includes.

Exercise Sample

Plotting Exercise Sample

Interactive Exercise Sample

You can also create interactive exercises right inside your R Markdown document. Suppose you want to explain people how variable assignment works in R. Create an exercise with a certain identifier, create_a in this case. Then, in different R code chunks, specify the elements of the exercise by setting the type inside the code chunk options.

R Script

Once MathJax and Datacamp-light libraries have been manually added to the post layout script. The rest part can be written into an R script which will render and process a single Rmd post. The script can also be improved to scan all of the Rmd posts in the directory and process them one after the other.

post <- "2017-12-23-R-tutorial-test"
source.dir  <- "_rmd_html"
target.dir <- "_posts"
rmd <- paste0(source.dir,"/",post,'.Rmd')
md <- paste0(source.dir,"/",post,'.md')
rmarkdown::render(rmd)
target <- paste0(target.dir,"/",post,".md")
if (file.exists(target)) 
  file.remove(target)
file.copy(md,target)
gitbash <- shQuote("C:\\Program Files\\Git\\bin\\sh.exe")
command <- paste0("sed '1d;2d' ",md," >",target)
cmd <- shQuote(command)
shell(cmd, shell=gitbash) 
system2("jekyll","build")

Tabbed Content

# Tabbed Content {.tabset .tabset-fade .tabset-pills}

## By Product

(tab content)

## By Region

(tab content)
comments powered by Disqus