Отображение фрагментов кода в кадре в hugo с использованием blogdown - PullRequest
Новая
       42

Отображение фрагментов кода в кадре в hugo с использованием blogdown

0 голосов
/ 26 декабря 2018

Я недавно создал пост в блоге, используя 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)
```

1 Ответ

0 голосов
/ 28 декабря 2018

Здесь есть два шага - выяснить, что стилизовать, а затем добавить стиль к теме.

Узнать, что стилизовать

Просмотр необработанного HTML-кода для сообщения (ctrl-U в Chrome), фрагменты кода заключены в набор тегов <pre class="r"><code>...Таким образом, мы могли бы задать ему границу (например), добавив в заголовок 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

Затем отредактируйте копию файла, добавив фрагмент указанного выше стиля.

...