Odtnhj

I am putting together a website using Blogdown/Hugo. I am 'manually' assembling the code and output rather than dynamically knitting with knitr as I didn't want to upload the dataset.

So, I'm using a css style to put borders around the code, etc.

This is all working as I want it to. But, is there a way to also have the syntax highlighting show in the rendered .html page? For example, if I run this using the code below, the html output is the first screengrab,

and I'd like the code coloured as in the second screengrab.

<style>
div.code pre 
 font-family: 'Source Code Pro', 'Courier New', monospace;
 font-size: 12px;
 background-color:#F5F8FA;
 padding-top: 10px;
 padding-bottom: 10px;
 padding-left: 10px;
 border: 1px solid lightgrey;
 border-radius: 5px;

</style>

<style>
div.output pre 
 font-family: 'Source Code Pro', 'Courier New', monospace;
 font-size: 12px;
 padding-top: 10px;
 padding-bottom: 10px;
 padding-left: 10px;
 border: 1px solid lightgrey;
 border-radius: 5px;

</style>


```r setup, include=FALSE
knitr::opts_chunk$set(collapse = T)
```

```r, echo=FALSE
library(rmarkdown) #used for syntax highlighting in this document
```


### Descriptives

The basic frequency histogram for Left and Right eye data, constructed with ggplot2.

<div class = "code">
```r hist, eval=F
hist_va <-ggplot(data, aes(x = bcva, fill = bcva < -0.1)) +
 geom_histogram(color = "black", binwidth = 0.05, center = 0.025) +
 scale_x_continuous(limits = c(-0.4, 0.4), breaks = seq(-0.4, 0.4, 0.1)) +
 theme(legend.position = "none") +
 xlab("Best Corrected Visual Acuity (logMAR)") +
 ylab("Frequency ") +
 scale_fill_manual(values = c("white", "red")) +
 facet_grid(. ~ eye)
```
</div>


Then overlaying the classification thresholds for SuperHuman vision.

<div class = "output">
```r hist2, eval=F
## hist_va + 
## geom_vline(data = data, aes(xintercept = -0.097, color = "red"), linetype = "dashed") +
## geom_text(aes(-0.25, 420, label = "Superhuman Vision", color = "red"))
```
</div>