Показать несколько фрагментов кода в сжатой форме

9

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

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

Есть кнопка для отображения / скрытия чанков (одна кнопка на чанк )

Одна идея будет иметь:

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

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

Куски с «вкладками»

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

Показать два куска рядом

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

Любая идея, если один из этих макетов может быть реализован в blogdown?

r blogdown bretauv
источник
2
Мне кажется, что Python и R где-то рядом, я не могу их воспроизвести, молюсь, чтобы кто-то решил это, у меня есть блог, который действительно улучшился бы, если бы это было возможно
Бруно
1
Позволяет ли blogdownвам добавить CSS? Используя CSS, вы можете создать два блока кода и разместить их рядом. С помощью CSS вы также можете отображать или скрывать фрагменты, и, возможно, сможете делать вкладки, но это не моя сильная сторона.
BeastCoder
@BeastCoder Я думаю, что blogdownмогу использовать CSS (см. Здесь ), но я никогда не использовал его, поэтому я попытаюсь, но я не думаю, что смогу достичь этого
bretauv
@bretauv Я думаю, что если бы вы могли понять, что это может стоить того, я могу оставить вам три урока, которые помогут вам полностью начать работу, если вы захотите пойти по этому пути.
BeastCoder
1. youtu.be/UB1O30fR-EE (это ускоренный курс HTML) 2. youtu.be/yfoY53QXEnI (это ускоренный курс CSS) 3. youtu.be/JJSoEo8JSnc (flexblock) Эти вещи должны быть в состоянии получить вас бок о бок фрагменты кода, но они также предоставят вам будущую информацию, которая всегда будет полезна. Добавление исчезающего и вновь появляющегося кода может быть сложнее, но если вам нужна ссылка на что-то, с чего можно начать, просто дайте мне знать. Я не слишком знаком с blogdown, но может быть другой способ, где вам не нужен CSS. В любом случае, я бы порекомендовал CSS
BeastCoder

Ответы:

0

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

Это то, что я сделал. Основываясь на этой странице , я поместил немного CSS-кода в мой .Rmarkdownфайл, содержащий одну из статей моего блога.

<style>
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  overflow: visible;
}

.flex-container > div {
  width: 200px;
  margin: 10px;
  text-align: left;
  line-height: 75px;
  font-size: 30px;
}
</style>
<div class="flex-container">
```{r message = FALSE}
head(mtcars)
```
</div>

Здесь он поместит код head(mtcars)и его вывод в два блока рядом друг с другом. Если вы ранее поместили другой блок </div>, порядок будет таким: блок, его выход, блок, его выход и т. Д. Существует множество опций для настройки отображения двух (или более) столбцов. Однако я не смог сделать несколько вещей:

  1. Я не знаю, можно ли заказать три куска. Например, если вы добавите чанк после того, как с head(mtcars), с , порядок будет: chunk1, выход chunk1, chunk2. Я не знаю, можно ли это переставить в: chunk1, chunk2, вывод chunk1.

  2. Если я помещу этот код в отдельный файл CSS, соответствующий фрагмент будет отображаться так, как если бы это был обычный текст. Как я могу поместить этот код во внешний файл CSS? Я знаю , что это объясняется в blogdownрусской книге , но я просто не мог заставить его работать. Что я пробовал до сих пор:

    • поместите код выше (между <style>и </style>) в файл, который я назвал main.cssи который я поместил вthemes/tale-hugo/static/css

    • поместите код ниже в начале моего .Rmarkdownфайла. Я попытался заменить путь своим абсолютным путем к файлу, main.cssи я также попытался просто заменить style.cssна main.cssв приведенном ниже коде, но безуспешно

      <html>
    <link rel="stylesheet" href="/css/style.css" />
</html>

    • Я также попытался поместить путь в customCSS, config.tomlно это не сработало

  3. Поскольку казалось, что CSS работает, я хотел посмотреть, возможно ли с его помощью создавать вкладки. Это действительно возможно, но требует некоторого кода JavaScript, и я никогда не использовал его раньше, поэтому, если кто-то может помочь с этим, заранее спасибо.

По сути, это рабочая основа, которая может быть обновлена, если я найду решения, но если вы знаете, как решить некоторые из этих проблем, не стесняйтесь.

bretauv
источник
@BeastCoder вот что я сделал до сих пор
Bretauv
0

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

Решение состоит в том, чтобы использовать Джонатана Сиди пакет данных , как указано в этом ответе . Первоначально целью этого пакета было скрыть некоторые выходные данные, которые занимают много места, например 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 на сайте).

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

bretauv
источник