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

Question

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

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

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

这是我的 post .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

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

确定风格

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

<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

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

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

Displaying code chunks in a frame in hugo using blogdown

hugo

blogdown

确定风格

添加主题