Wyświetlaj kilka fragmentów kodu w zwięzły sposób

Tworzę blog, blogdownw którym porównuję kod z R i kod ze Staty. Chciałbym pokazać oba kody, aby użytkownik mógł porównać, jak to się robi w R i w Stata. Jednak umieszczenie dwóch lub więcej fragmentów w wierszu (kod R, kod Stata + wyjście) powoduje, że odczyt jest dość niewygodny.

Przyszło mi do głowy kilka układów zawierających kilka fragmentów, ale nie wiem, czy są one już zaimplementowane, czy jest to w ogóle możliwe.

Posiadaj przycisk do wyświetlania / ukrywania fragmentów (jeden przycisk na fragment )

Jednym z pomysłów byłoby posiadanie:

fragmenty kodu R widoczne domyślnie w artykule,
fragmenty kodu Stata są domyślnie niewidoczne, ale widoczne, jeśli użytkownik kliknie przycisk

Tej osobie i tej osobie udało się złożyć swoje fragmenty kodu w blogdown, ale najwyraźniej domyślnie ukrywa lub pokazuje wszystkie fragmenty. Jak mogę domyślnie ukryć tylko niektóre fragmenty? Czy istnieje opcja (jak opcje eval, echo...), która ukrywa lub pokazuje fragment kodu w blogdown?

Kawałki z „kartami”

Tytuł tej części mówi sam za siebie: czy można mieć tabulatory we fragmencie, abyśmy mogli przełączać się z jednego kodu na drugi (tak jak na przykład tabulatory w przeglądarkach internetowych)?

Wyświetl dwie porcje obok siebie

W niektórych blogdownmotywach (może wszystkich, nie wiem) szerokość jest dość zmniejszona, a po bokach jest trochę niewykorzystanej przestrzeni. Czy w związku z tym można zwiększyć szerokość niektórych części artykułu i wyświetlić obok siebie dwa kawałki?

Masz pomysł, czy można zrealizować jeden z tych układów blogdown?

r blogdown

— bretauv
źródło

Wydaje mi się, że Python i R są gdzieś obok siebie, nie mogłem tego powielić, modląc się, aby ktoś to rozwiązał, mam blog, który naprawdę by się poprawił, gdyby to było możliwe

— Bruno

Czy blogdownpozwala ci dodać CSS? Za pomocą CSS możesz utworzyć dwa bloki kodu i umieścić je obok siebie. Dzięki CSS możesz także wyświetlać lub ukrywać fragmenty i być może możesz robić zakładki, ale to nie jest moja mocna strona.

— BeastCoder

@BeastCoder Myślę, że blogdownmogę używać CSS (patrz tutaj ), ale nigdy go nie użyłem, więc spróbuję, ale nie sądzę, że będę w stanie to osiągnąć

— bretauv

@bretauv Myślę, że jeśli uda ci się to rozgryźć, warto, zostawię ci trzy samouczki, dzięki którym możesz zacząć działać, jeśli chcesz pójść tą ścieżką.

— BeastCoder

1. youtu.be/UB1O30fR-EE (czyli HTML Crash Course) 2. youtu.be/yfoY53QXEnI (czyli kurs CSS zderzeniowych) 3. youtu.be/JJSoEo8JSnc (flexblock) Te rzeczy powinny być w stanie dostać się fragmenty kodu obok siebie, ale dostarczą również przyszłych informacji, które zawsze będą pomocne. Dodanie znikającego i ponownie pojawiającego się kodu może być trudniejsze, ale jeśli chcesz uzyskać link do czegoś na początek, daj mi znać. Nie znam się zbyt dobrze na blogdown, ale może istnieć inny sposób, w którym nie potrzebujesz CSS. Tak czy inaczej, poleciłbym CSS

— BeastCoder

Odpowiedzi:

Ok, tu jest częściowa odpowiedź. Mógłbym po prostu umieścić kilka kawałków obok siebie, ale nie wiem, jak zrealizować inne propozycje w moim poście.

Oto co zrobiłem. Na podstawie tej strony umieściłem trochę kodu CSS w moim .Rmarkdownpliku zawierającym jeden z artykułów mojego bloga.

<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>

Tutaj umieści kod head(mtcars)i jego dane wyjściowe w dwóch porcjach obok siebie. Jeśli wcześniej wstawisz inną porcję </div>, kolejność będzie następująca: porcja, jej wynik, porcja, jej wynik itp. Istnieje wiele opcji dostosowywania wyświetlania dwóch (lub więcej) kolumn. Jest jednak kilka rzeczy, których nie mogłem zrobić:

Nie wiem, czy można zamówić trzy kawałki. Na przykład, jeśli dodasz porcję po tej z head(mtcars), kolejność będzie następująca: chunk1, wyjście chunk1, chunk2. Nie wiem, czy można to zmienić w: chunk1, chunk2, wyjście chunk1.
Jeśli wstawię ten kod do osobnego pliku CSS, dany fragment zostanie wyświetlony tak, jakby był to zwykły tekst. Jak mogę umieścić ten kod w zewnętrznym pliku CSS? Wiem, że to jest wyjaśnione w blogdown„s książki , ale ja po prostu nie mógł tego dokonać. Do tej pory próbowałem:
- umieść kod powyżej (pomiędzy <style>i </style>) w pliku, który nazwałem main.cssi który umieściłemthemes/tale-hugo/static/css
- umieść kod poniżej na początku mojego .Rmarkdownpliku. Próbowałem zastąpić ścieżkę moją bezwzględną ścieżką do pliku, main.cssa także próbowałem zastąpić style.cssją main.cssw poniższym kodzie, ale bez powodzenia
```
<html>
    <link rel="stylesheet" href="/css/style.css" />
</html>
```
- Próbowałem również umieścić ścieżkę w customCSS, config.tomlale to nie działało
Ponieważ wydaje się, że CSS działa, chciałem sprawdzić, czy można za jego pomocą tworzyć karty. Jest to rzeczywiście możliwe, ale wymaga kodu JavaScript i nigdy wcześniej go nie używałem, więc jeśli ktoś może w tym pomóc, z góry dziękuję.

Zasadniczo jest to podstawa robocza, która może zostać zaktualizowana, jeśli znajdę rozwiązania, ale jeśli wiesz, jak rozwiązać niektóre z tych problemów, nie wahaj się.

— bretauv
źródło

@BeastCoder oto co robiłem do tej pory

— bretauv

Ponieważ moja poprzednia odpowiedź była nieco niechlujna i niezbyt szczegółowa, tworzę nową odpowiedź, która jest w porządku z tym, co chciałem zrobić (tj. Z możliwością złożenia niektórych fragmentów kodu).

Rozwiązaniem jest użycie pakietu szczegółów Jonathana Sidi , jak wskazano w tej odpowiedzi . Pierwotnie celem tego pakietu było ukrycie niektórych danych wyjściowych, które zajmują dużo miejsca, na przykład sessionInfow dokumentach HTML wykonanych za pomocą R Markdown (a zatem także za pomocą R Blogdown). Oto przykład (wzięty ze strony internetowej pakietu):

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

```{r}
library(details)

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

Jednak to, co chcę ukryć, nie jest wyjściem jakiegoś kodu R, ale kodem Stata (który nie jest przeznaczony do uruchomienia), aby czytelnicy mogli porównać kod R z kodem Stata, jeśli chcą. Dlatego musimy użyć do tego 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>

Teraz czytelnicy mogą zobaczyć kod Stata, jeśli chcą, a ci, którzy tego nie chcą, nie są rozproszeni przez zbyt wiele fragmentów kodu. Działa to również w przypadku artykułów Blogdown (ponieważ jest to „tylko” część R Markdown na stronie internetowej).

Więcej funkcji ( na przykład dostosuj ukryte porcje ) znajduje się na stronie internetowej pakietu.

— bretauv
źródło