4

I am trying to create my first Slidify presentation. I am relatively new to JS, CSS and HTML5. I am using the following YAML material and R Markdown code. I want to create a simple slide showing that R can be used as a big calculator. My problem is that I can only fit about 3 simple expressions and their returned output onto a single slide. As such, I would greatly appreciate any possible suggestions on how to better control the Slidify output (smaller font size, or smaller borders around highlighted syntax and evaluated/returned R output).

Below is my .Rmd file:

---
title       : An Introduction to R
subtitle    : Getting You "R Aware" And Beyond
author      : Christopher Meaney
job         : Biostatistician, University of Toronto
framework   : io2012        # {io2012, html5slides, shower, dzslides, ...}
highlighter : highlight.js  # {highlight.js, prettify, highlight}
hitheme     : tomorrow      # 
widgets     : []            # {mathjax, quiz, bootstrap}
mode        : selfcontained # {standalone, draft}

--- .nobackground 

## R Can be Used as A Big Calculator

```{r, results='asis', echo=TRUE}
## Addition
1 + 1
## Exponentiation followed by multiplication (BEDMAS)
4*5^2
## Area of a circle of radius r=2
pi*2^2
## Natural logarithm of 1 multiplied by exponential (function) evaluated at 0
log(1)*exp(0)
```

There is a nice discussion of the problem on Github. https://github.com/ramnathv/slidify/issues/189 However, I can't seem to disentangle which of part of @Robert's answer deals with syntax highlighting versus font size and border adjustment. Further, a lot of suggested solutions are thrown around in the discussion, which is easiest for a noob to implement?

As a follow-up, how would I set/apply this option globally so all R chunks evaluated by knitr and presented by slidify have this same small/condensed property?

Chris
  • 3,401
  • 5
  • 33
  • 42

1 Answers1

2

I'm fairly confident this is NOT the most efficient way to tackle the problem. However, it seems to achieve many of the objectives. So I'll write it up and wait to see if any better solutions arise.

The R syntax whose font (and other formatting) I want to adjust is in between a pair of <pre> </pre> tags.

The R output whose font (and other formatting) I want to adjust is between a pair of <p> </p> tags.

I only want to adjust the code on some slides. So I create the following CSS files. I store them in the directory: .../mydeck/assets/css/

This is the overkill (which might not all be necessary).

File 1 (.../mydeck/assets/css/codefont.css)

slide.codefont pre {
font-size: 9px ;
}

File 2 (.../mydeck/assets/css/outfont.css)

slide.outfont p {
font-size: 9px ;
}

File 3 (.../mydeck/assets/css/codemargin.css)

slide.codemargin pre {
margin-top: -10px ;
margin-bottom: -10px ;
padding-top: -10px ;
padding-bottom: -10px ;
}

File 4 (.../mydeck/assets/css/outmargin.css)

slide.outmargin p {
margin-top: -10px ;
margin-bottom: -10px ;
padding-top: -10px ;
padding-bottom: -10px ;
}

Then when I specify my simple R as a big calculator slide in the .Rmd file I just add the following:

--- .codefont .outfont .codemargin .outmargin .nobackground 

## R Can be Used as A Big Calculator

```{r, results='asis', echo=TRUE}
## Addition
1 + 1
## Exponentiation followed by multiplication (BEDMAS)
4*5^2
## Area of a circle of radius r=2
pi*2^2
## Natural logarithm of 1 multiplied by exponential (function) evaluated at 0
log(1)*exp(0)
```

This makes the R syntax and R output a smaller than default. And it also trims away some of the white space between the R syntax and the R output.

  • There is still a fair bit of unused white space in the R syntax highlighter that I would love to remove (in between the border and the actual R code).
  • Also interested in comments on the possibility of accomplishing the same results using fewer CSS files (1 or 2 CSS files instead of 4).
  • Also, thoughts on how to implement this approach across all slides where R code appears (so I don't have to continually add --- .codefont .outfont .codemargin .outmargin to all slides consisting of R code. Being able to wrap the whole thing in a function where font=, margin=, padding= could be specified as arguments would be cool.

Still considering this an open problem...Thanks.

Chris
  • 3,401
  • 5
  • 33
  • 42