Displaying code chunks in a frame in hugo using blogdown - hugo

Question

I have recently created a blog post using blogdown and hugo. I was able to add code folding but the code appears like regular text on the website. I am trying to display the code in a frame or something distinguishing it from the rest of the text ex:
I have tried everything but could not figure how to do it. I am guessing it has to deal something with the theme I am using. I am using Hugo Nuo.
You can find the current shape of the blog post here:
https://www.staturk.xyz/post/poll-accuracy-in-turkish-elections/
Here is the beginning of my .rmd file for the post where I am trying to display the code in a frame:
---
title: "Poll Accuracy in Turkish Elections"
date: '2018-12-25'
slug: poll-accuracy-in-turkish-elections
tags:
- Polls
- Politics
- R
categories:
- Turkish Politics
- Rstats
---
```{r, echo=FALSE}
htmltools::includeHTML("~/Documents/Personal/Projects/Blog/Turkstat/content/media/posts/header.html")
```
```{r echo = F, results='hide', message=FALSE}
library(tidyverse)
library(plyr)
library(stringr)
library(scales)
library(knitr)
```

Answer 1

There are two steps here - figuring out what to style and then adding the style to the theme.
Figuring out what to style
Looking at the raw html for the post (ctrl-U in Chrome), the code fragments are wrapped in a <pre class="r"><code>..</code></pre> tag set. So, we could give it a border (for instance) by adding the following to the html header :
<style>
pre.r {
border-style: solid;
border-width: 2px;
}
</style>
Adding to the theme
Looking at the theme code, the best way to accomplish this seems to be to override the head partial in themes/{theme_name}/layouts/partials/head.html. Copy that file up into the the same area of the site folder. The following commands will do the trick if you are on linux:
cd $sitedir
mkdir -p layouts/partials
cp themes/hugo-nuo/layouts/partial/head.html layouts/partial
Then edit the copy of the file to add the above style fragment.