Как включить подсветку синтаксиса в фрагментах кода в презентациях r markdown ioslides? - PullRequest
Новая
       82

Как включить подсветку синтаксиса в фрагментах кода в презентациях r markdown ioslides?

0 голосов
/ 09 мая 2018

Есть ли способ включить подсветку синтаксиса в фрагментах кода документов разметки R, которые отображаются как ioslides_presentation ? В справочном листе со скидкой написано, что аргумент YAML highlight не работает для ioslides . Поэтому я искал способ включить подсветку синтаксиса с помощью настроенного файла css , но я не нашел никакого решения для этого, так как я не знаком с css.

Любая помощь будет оценена. Вот короткий воспроизводимый пример: 

---
title: "example"
output: ioslides_presentation
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

## Slide with R Output

```{r cars, echo = TRUE, eval = FALSE}
# cars' summary as an example for a comment
summary(cars)
# example for integers
cars[,1]
```

1 Ответ

0 голосов
/ 09 мая 2018

Если вы перейдете в папку библиотеки установки R, вы сможете перейти к (обратите внимание, что номер вашей версии может отличаться): 

rmarkdown > rmd > ioslides > ioslides-13.5.1 > theme > css

чтобы найти файл default.css. Там вы можете прокрутить вниз до комментария /*Pretty print */. Ниже вы должны увидеть кучу аргументов, которые начинаются с .prettyprint. Лучше всего скопировать их в новый пользовательский файл .css, чтобы вы могли немного поиграть, пока не получите нужную подсветку. Например, я создал файл с именем slides.css и поместил его в ту же папку, что и мой документ по уценке. Затем я скопировал эти аргументы CSS и просто изменил цвета: 

/* Pretty print */

/* line 600, ../scss/default.scss */
.prettyprint .com {
  /* a comment */
  color: green;
  font-style: italic;
}

/* line 604, ../scss/default.scss */
.prettyprint .lit {
  /* a literal value */
  color: black;
}

/* line 609, ../scss/default.scss */
.prettyprint .pun,
.prettyprint .opn,
.prettyprint .clo {
  color: red;
}

/* line 618, ../scss/default.scss */
.prettyprint .pln {
  color: blue;
}

Затем, с моим файлом ioslides: 

---
title: "Ioslides check"
output: 
  ioslides_presentation:
    css: slides.css
---

##

```{r}
# cars[,1]  as an example for a comment
head(cars)
cars[1:5, 1]
```

Мой вывод выглядит как

enter image description here

Если вы хотите выяснить, какие элементы вы действительно хотите изменить (например, если вы вместо этого хотите изменить внешний вид вашего кода), вы можете использовать функцию проверки браузера (CTRL + SHIFT + I в chrome), чтобы выделить элементы вывода ioslides, чтобы увидеть, к какому классу они принадлежат. Например, когда я выделяю вывод результатов, он показывает, что это можно изменить, играя с тегом pre (предварительно отформатированный текст). Поэтому, если я добавлю аргумент цвета к pre: 

pre {
  font-family: 'Source Code Pro', 'Courier New', monospace;
  font-size: 20px;
  color: pink;
  line-height: 28px;
  padding: 10px 0 10px 60px;
  letter-spacing: -1px;
  margin-bottom: 20px;
  width: 106%;
  left: -60px;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /*overflow: hidden;*/
}

Я также могу изменить вывод результатов:

enter image description here

, но имейте в виду, что многие из перечисленных выше классов также содержатся в теге pre, поэтому, если вы вносите изменения в pre, которые не переопределяются дочерним классом, вы можете получить некоторые непредвиденные результаты. Например, если я изменю font-size элементов pre: 

/* line 337, ../scss/default.scss */
pre {
  font-family: 'Source Code Pro', 'Courier New', monospace;
  font-size: 50px;
  line-height: 28px;
  padding: 10px 0 10px 60px;
  letter-spacing: -1px;
  margin-bottom: 20px;
  width: 106%;
  left: -60px;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /*overflow: hidden;*/
}

но изменить размер шрифта только некоторых дочерних элементов 

/* line 604, ../scss/default.scss */
.prettyprint .lit {
  /* a literal value */
  color: black;
  font-size: 20px;
}

мой вывод будет вонючим:

enter image description here

...