Отображение нескольких фрагментов кода в сжатой форме

Я создаю блог с blogdown, в котором я сравниваю код из R и код из Stata. Я хотел бы показать оба кода, чтобы пользователь мог сравнить, как это делается в R и в Stata. Однако размещение двух или более фрагментов подряд (код для R, код для Stata + вывод) делает чтение весьма неудобным.

Мне пришло в голову несколько макетов, включающих несколько фрагментов, но я не знаю, реализованы ли они уже и возможно ли это сделать.


Наличие кнопки для отображения/скрытия фрагментов (одна кнопка на каждый фрагмент)

Одна идея заключалась бы в том, чтобы иметь:

  • куски кода R, видимые по умолчанию в статье,
  • фрагменты кода Stata невидимы по умолчанию, но видны, если пользователь нажимает кнопку

Этот человек и этому человеку удалось свернуть фрагменты кода в blogdown, но, по-видимому, он скрывает или показывает каждый фрагмент по умолчанию. Как я могу скрыть только некоторые фрагменты по умолчанию? Есть ли опция (например, опции eval, echo...), которая скрывает или показывает фрагмент кода в blogdown?


Фрагменты с вкладками

Название этой части говорит само за себя: возможно ли иметь вкладки в чанке, чтобы мы могли переключаться с одного кода на другой (как, например, вкладки в веб-браузерах)?


Отображать два фрагмента рядом

В некоторых blogdown темах (может и во всех, не знаю) ширина довольно сильно уменьшена и по бокам остается неиспользуемое пространство. Следовательно, можно ли увеличить ширину некоторых частей статьи и отобразить два фрагмента рядом?

Есть идеи, можно ли реализовать один из этих макетов в blogdown?


person bretauv    schedule 28.12.2019    source источник
comment
Мне кажется, что Python и R где-то бок о бок, я не могу воспроизвести это, молюсь, чтобы кто-нибудь решил это, у меня есть блог, который действительно улучшился бы, если бы это было возможно.   -  person Bruno    schedule 08.01.2020
comment
Позволяет ли blogdown добавлять CSS? Используя CSS, вы можете создать два блока кода и разместить их рядом. С помощью CSS вы также можете отображать или скрывать фрагменты и, возможно, делать вкладки, но это не моя сильная сторона.   -  person BeastCoder    schedule 15.01.2020
comment
@BeastCoder Я думаю, что blogdown может использовать CSS (см. здесь), но я никогда не использовал так что я постараюсь, но я не думаю, что смогу добиться этого   -  person bretauv    schedule 15.01.2020
comment
@bretauv Я думаю, что если бы вы могли понять это, возможно, оно того стоило бы, я могу оставить вам три учебника, которые помогут вам полностью начать работу, если вы хотите пойти по этому пути.   -  person BeastCoder    schedule 15.01.2020
comment
1. youtu.be/UB1O30fR-EE (это ускоренный курс HTML) 2. youtu.be/yfoY53QXEnI (это ускоренный курс CSS) 3. youtu.be/JJSoEo8JSnc (flexblock) Эти вещи должны быть в состоянии предоставить вам параллельные фрагменты кода, но они также предоставят вам будущую информацию, которая всегда будет полезный. Добавить исчезающий и вновь появляющийся код может быть сложнее, но если вам нужна ссылка на что-то, с чего можно начать, просто дайте мне знать. Я не слишком знаком с blogdown, но может быть другой способ, когда вам не нужен CSS. В любом случае, я бы порекомендовал CSS   -  person BeastCoder    schedule 15.01.2020
comment
@BeastCoder спасибо, я проверю это   -  person bretauv    schedule 15.01.2020
comment
@bretauv Хорошо, звучит хорошо, дайте мне знать, если вы справитесь с этим :-D   -  person BeastCoder    schedule 15.01.2020
comment
@bretauv Я только что провел небольшое исследование, и похоже, что вы также можете поместить текст в теги html, я бы рекомендовал поместить текст в ‹span›, затем я бы добавил файл css, чтобы центрировать вещи, используя класс на пролете   -  person BeastCoder    schedule 15.01.2020
comment
@Bruno см. мой (частичный) ответ ниже   -  person bretauv    schedule 16.01.2020


Ответы (2)


Поскольку мой предыдущий ответ был немного запутанным и не очень подробным, я делаю новый ответ, который соответствует тому, что я хотел сделать (т.е. иметь возможность свернуть некоторые фрагменты кода).

Решение состоит в том, чтобы использовать пакет details Джонатана Сиди, как указано этот ответ . Первоначально цель этого пакета заключалась в том, чтобы скрыть некоторые выходные данные, которые занимают много места, такие как sessionInfo, в HTML-документах, созданных с помощью R Markdown (и, следовательно, также с R Blogdown). Вот пример (взято с сайта пакета):

---
title: "Test"
output: html_document
---

```{r}
library(details)

sessioninfo::session_info()%>%
  details::details(summary = 'current session info')
```

Однако то, что я хочу скрыть, — это не вывод некоторого кода R, а код Stata (который не предназначен для запуска), чтобы читатели могли сравнить код R с кодом Stata, если захотят. Поэтому для этого мы должны использовать некоторый HTML:

---
title: "Test"
output: html_document
---

## Regression with R and Stata

```{r, eval=FALSE}
lm(mpg ~ drat, data = mtcars)
```

<details>
<summary> Stata </summary>
```stata
regress y x
```
</details>

Теперь читатели могут видеть код Stata, если хотят, а те, кто не хочет, не отвлекаются на слишком большое количество фрагментов кода. Это работает и для статей Blogdown (поскольку это «просто» немного R Markdown на веб-сайте).

Дополнительные функции (например, настроить скрытые фрагменты) подробно описаны на веб-сайте пакета. .

person bretauv    schedule 04.04.2020

Я нашел другую альтернативу, которая пока кажется лучшей: использовать наборы панелей {xaringanExtra}.

Наборы панелей работают для {xaringan} презентаций, а также для вывода R Markdown (и, следовательно, {blogdown}). Подробнее см. здесь. Вот небольшая демонстрация:

---
title: Title
output:
  blogdown::html_page
---

```{r include = FALSE}
library(xaringanExtra)
# enable panelset
use_panelset()
```

## Title 

Here's a simple way to display several code chunks in a concise way:


::::: {.panelset}

<!-- First panel -->
::: {.panel}
[R code]{.panel-name}

Check the R code below:
```{r echo = TRUE, eval = FALSE}
lm(mpg ~ drat, data = mtcars)
```
:::

<!-- Second panel -->
::: {.panel}
[Stata code]{.panel-name}

```
regress y x

```
:::

<!-- Third panel -->
::: {.panel}
[R output]{.panel-name}
```{r echo = FALSE, eval = TRUE}
lm(mpg ~ drat, data = mtcars)
```
:::

::::

введите здесь описание изображения

person bretauv    schedule 16.11.2020