使用 blogdown 在 Hugo 的框架中显示代码块

Question

我最近使用 blogdown 和 hugo 创建了一篇博文。我能够添加代码折叠，但代码在网站上看起来像常规文本。我正在尝试在框架中显示代码或将其与文本的其余部分区分开来：

我已经尝试了所有方法，但不知道该怎么做。我猜它必须处理我正在使用的主题。我正在使用 Hugo Nuo。

您可以在此处找到博客文章的当前形状： https://www.staturk.xyz/post/poll-accuracy-in-turkish-elections/

这是我试图在框架中显示代码的帖子的 .rmd 文件的开头：

---
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

这里有两个步骤 - 确定样式，然后将样式添加到主题中。

确定样式

查看帖子的原始 html（Chrome 中的 ctrl-U），代码片段被包装在 <pre class="r"><code>..</code></pre> 标记集中。因此，我们可以通过在 html 标头中添加以下内容来给它一个边框（例如）：

<style>
  pre.r { 
    border-style: solid; 
    border-width: 2px; 
  }
</style>

添加到主题

查看主题代码，完成此操作的最佳方法似乎是覆盖themes/{theme_name}/layouts/partials/head.html 中的头部部分。将该文件复制到站点文件夹的同一区域。如果您使用的是 linux，则以下命令可以解决问题：

cd $sitedir
mkdir -p layouts/partials
cp themes/hugo-nuo/layouts/partial/head.html layouts/partial

然后编辑该文件的副本以添加上述样式片段。