Відображте кілька фрагментів коду стисло

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

Мені спало на думку кілька макетів, які включають кілька фрагментів, але я не знаю, чи вони вже реалізовані, чи це можливо навіть зробити.

Мати кнопку для відображення / приховування фрагментів (одна кнопка на шматок )

Однією була б ідея:

фрагменти коду R, видимі за замовчуванням у статті,
код штату за замовчуванням невидимий, але видимий, якщо користувач натискає кнопку

Цій людині та цій людині вдалося скласти свої кодові фрагменти в блогдаун, але, мабуть, вона приховує або показує всі шматки за замовчуванням. Як я можу приховати лише деякі фрагменти за замовчуванням? Чи є варіант (наприклад, параметри eval, echo...), який ховає або показує фрагмент коду blogdown?

Чанки з "вкладками"

Заголовок цієї частини говорить сам за себе: чи можна мати вкладки, коли ми можемо переходити з одного коду на інший (як, наприклад, вкладки у веб-браузерах)?

Покажіть два шматки поруч

У деяких blogdownтемах (можливо, у всіх, я не знаю) ширина досить зменшена, а з боків є якийсь невикористаний простір. Отже, чи можна збільшити ширину на деяких частинах виробу і відобразити два шматки поруч?

Будь-яка ідея, чи можна реалізувати одну з цих макетів blogdown?

r blogdown

— бретаув
джерело

Мені здається, Python і R десь поруч, я не міг його повторити, молячись, щоб хтось це вирішив, у мене є блог, який би справді покращився, якби це було можливо

— Бруно

Чи 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) Ці речі повинні мати змогу отримати вас побічні шматочки коду, але вони також нададуть вам майбутню інформацію, яка завжди буде корисною. Додавання зникаючого та повторного появи коду може бути складніше, але якщо ви хочете, щоб посилання на щось почала, просто дайте мені знати. Я не надто знайомий з блоґдаундом, але може бути інший спосіб, коли вам не потрібен CSS. Так чи інакше, я б рекомендував CSS

— BeastCoder

Відповіді:

Гаразд, ось часткова відповідь. Я міг би просто поставити кілька шматочків поруч, але я не знаю, як реалізувати інші пропозиції у своєму посту.

Це я і зробив. На основі цієї сторінки я помістив у свій .Rmarkdownфайл якийсь CSS-код, що містить одну зі статей мого блогу.

<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>, порядок буде таким: фрагмент, його вихід, фрагмент, його вихід тощо. Існує багато варіантів налаштування відображення двох (або більше) стовпців. Однак я не можу зробити декілька речей:

Я не знаю, чи можна замовити три шматки. Наприклад, якщо ви додасте фрагмент після того, з яким head(mtcars), порядком буде: chunk1, вихід chunk1, chunk2. Я не знаю, чи можна її переставити в: chunk1, chunk2, output of chunk1.
Якщо я поміщую цей код в окремий файл 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але це не вийшло
Оскільки CSS, здавалося, працює, я хотів дізнатися, чи можна створити вкладки з ним. Це дійсно можливо, але він вимагає деякого коду JavaScript, і я його ніколи раніше не використовував, якщо хтось може допомогти у цьому, заздалегідь дякую.

В основному, це робоча основа, яка може бути оновлена, якщо я знайду рішення, але якщо ви знаєте, як вирішити деякі з цих проблем, не вагайтесь.

— бретаув
джерело

@BeastCoder ось що я робив дотепер

— bretauv

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

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

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

— бретаув
джерело