Applying CSS to make code smaller in ioslides style

Question

I am using R Studio's ioslides presentation mode to display the results of a simple linear regression model, which I will apply Shiny stuff to later. However, the summary of the regression is a bit long, so I'd like the code to fit on one slide. I am unable to find a way to make the font smaller in order to do this. My research points me to a custom CSS file, but all of the tags that I have tried have done nothing. I am referencing the original CSS given in the default.css.

The "title-slide" portion of the CSS was functional in making the title smaller, but I don't understand why the "code" portion of the CSS isn't functioning in making the printed code's font smaller.

Rmd file:

title: "Regression Presentation"
runtime: shiny
output:
ioslides_presentation:
    css: shinyprezcss.css
    widescreen: yes


## Results {.smallcode}
```{r,echo=FALSE}
    lemon <-read.csv("LemonData.csv")
```
```{r,}
    model.fit.1<-lm(y~(x1+x2+x3+x4+x5)^2,lemon)
    summary(model.fit.1)
```

CSS file:

.smallcode code {
    font-size: 60%;
}

.title-slide hgroup h1 {
    font-size: 65px;
    line-height: 1.4;
    letter-spacing: -3px;
    color: #515151;
}

score 4 · Accepted Answer · edited May 23 '17 at 11:47

Not the first person to have this problem, it seems. I missed this answer yesterday.

My solution is as follows, which appears to apply the pre tag using a custom "codefont" class. I apply this to only the slide it is needed on.

Rmd file:

title: "Regression Presentation"
runtime: shiny
output:
ioslides_presentation:
    css: shinyprezcss.css
    widescreen: yes


## Results {.codefont}
```{r,echo=FALSE}
    lemon <-read.csv("LemonData.csv")
```
```{r}
    model.fit.1<-lm(y~(x1+x2+x3+x4+x5)^2,lemon)
    summary(model.fit.1)
```

CSS file:

.codefont pre {
    font-size: 12px;
    line-height: 10px;
}

Applying CSS to make code smaller in ioslides style

1 Answers1