Tampilkan beberapa potongan kode secara ringkas

Saya membuat blog dengan blogdownmana saya membandingkan kode dari R dan kode dari Stata. Saya ingin menunjukkan kedua kode sehingga pengguna dapat membandingkan bagaimana hal itu dilakukan dalam R dan di Stata. Namun, menempatkan dua atau lebih potongan berturut-turut (kode untuk R, kode untuk output Stata +) membuat pembacaannya cukup tidak nyaman.

Beberapa tata letak muncul di benak saya untuk memasukkan beberapa potongan tetapi saya tidak tahu apakah itu sudah diterapkan atau apakah itu mungkin dilakukan.

Memiliki tombol untuk menampilkan / menyembunyikan bongkahan (satu tombol per bongkahan )

Satu ide adalah:

potongan kode R yang terlihat secara default di artikel,
kode Stata tidak terlihat secara default tetapi terlihat jika pengguna mengklik tombol

Orang ini dan orang ini berhasil melipat potongan kode mereka di blogdown tetapi tampaknya menyembunyikan atau menunjukkan setiap potongan secara default. Bagaimana saya bisa menyembunyikan sebagian saja secara default? Apakah ada opsi (seperti opsi eval, echo...) yang menyembunyikan atau menampilkan potongan kode blogdown?

Potongan dengan "tab"

Judul bagian ini berbicara untuk dirinya sendiri: apakah mungkin untuk memiliki tab di chunk sehingga kita dapat beralih dari satu kode ke yang lain (seperti halnya tab di browser web misalnya)?

Peragakan dua bongkahan berdampingan

Dalam beberapa blogdowntema (mungkin semua, saya tidak tahu), lebarnya cukup berkurang dan ada beberapa ruang yang tidak digunakan di samping. Oleh karena itu, apakah mungkin untuk menambah lebar pada beberapa bagian artikel dan untuk menampilkan dua potongan berdampingan?

Adakah ide jika salah satu dari layout ini dapat direalisasikan blogdown?

r blogdown

— Bretauv
sumber

Saya sepertinya Python dan R berdampingan di suatu tempat, tidak bisa meniru, berdoa agar seseorang menyelesaikan ini, saya punya blog yang akan benar-benar membaik jika memungkinkan

— Bruno

Apakah blogdownAnda dapat menambahkan CSS? Menggunakan CSS Anda bisa membuat dua blok kode dan meletakkannya berdampingan. Dengan CSS Anda juga bisa menampilkan atau menyembunyikan potongan, dan mungkin bisa melakukan tab, tapi itu bukan poin kuat saya.

— BeastCoder

@BeastCoder Saya pikir blogdowndapat menggunakan CSS (lihat di sini ) tapi saya tidak pernah menggunakannya jadi saya akan mencoba tetapi saya tidak berpikir saya akan dapat mencapai ini

— bretauv

@ Bretauv Saya berpikir bahwa jika Anda bisa mengetahuinya mungkin layak, saya dapat meninggalkan Anda tiga tutorial yang dapat membuat Anda benar-benar bangun dan berjalan jika Anda ingin mengambil jalan itu.

— BeastCoder

1. youtu.be/UB1O30fR-EE (yang merupakan kursus kilat HTML) 2. youtu.be/yfoY53QXEnI (yang merupakan kursus kilat CSS) 3. youtu.be/JJSoEo8JSnc (flexblock) Hal-hal tersebut seharusnya dapat membantu Anda potongan kode berdampingan tetapi mereka juga akan memberi Anda informasi di masa mendatang yang akan selalu membantu. Menambahkan kode yang menghilang dan muncul kembali mungkin lebih sulit, tetapi jika Anda ingin tautan untuk memulai, beri tahu saya. Saya tidak terlalu terbiasa dengan blogdown tetapi mungkin ada cara lain di mana Anda tidak perlu CSS. Either way, saya akan merekomendasikan CSS

— BeastCoder

Jawaban:

Oke inilah jawaban parsial. Saya hanya bisa meletakkan beberapa potongan berdampingan tetapi saya tidak tahu bagaimana mewujudkan proposisi lain dalam posting saya.

Inilah yang saya lakukan. Berdasarkan halaman ini , saya memasukkan beberapa kode CSS ke .Rmarkdownfile saya yang berisi salah satu artikel di blog saya.

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

Di sini, ia akan meletakkan kode head(mtcars)dan hasilnya dalam dua potongan berdampingan. Jika Anda meletakkan potongan lain sebelumnya </div>, urutannya adalah: sepotong, keluarannya, sepotong, keluarannya, dll. Ada banyak opsi untuk menyesuaikan tampilan dua kolom (atau lebih). Namun ada beberapa hal yang tidak bisa saya lakukan:

Saya tidak tahu apakah mungkin memesan tiga potong. Misalnya, jika Anda menambahkan chunk setelah yang dengan head(mtcars), urutannya adalah: chunk1, output chunk1, chunk2. Saya tidak tahu apakah itu bisa diatur ulang di: chunk1, chunk2, output dari chunk1.
Jika saya meletakkan kode ini dalam file CSS terpisah, potongan yang bersangkutan akan ditampilkan seolah-olah itu adalah teks biasa. Bagaimana saya bisa meletakkan kode ini dalam file CSS eksternal? Saya tahu bahwa ini dijelaskan dalam blogdown's buku , tapi aku tidak bisa membuatnya bekerja. Apa yang saya coba sejauh ini adalah:
- letakkan kode di atas (antara <style>dan </style>) dalam file yang saya beri nama main.cssdan saya tempatkanthemes/tale-hugo/static/css
- letakkan kode di bawah ini di awal .Rmarkdownfile saya . Saya mencoba mengganti jalur dengan jalur absolut ke file main.cssdan saya juga mencoba hanya mengganti style.cssdengan main.csskode di bawah ini, tetapi tidak berhasil
```
<html>
    <link rel="stylesheet" href="/css/style.css" />
</html>
```
- Saya juga mencoba meletakkan path di customCSS config.tomltetapi tidak berhasil
Karena CSS tampaknya berfungsi, saya ingin melihat apakah mungkin untuk membuat tab dengannya. Memang mungkin tetapi memerlukan beberapa kode JavaScript dan saya tidak pernah menggunakannya sebelumnya jadi jika seseorang dapat membantu dengan itu, terima kasih sebelumnya.

Pada dasarnya, ini adalah dasar kerja yang mungkin diperbarui jika saya menemukan solusi, tetapi jika Anda tahu bagaimana menyelesaikan beberapa masalah ini, jangan ragu.

— Bretauv
sumber

@BeastCoder inilah yang telah saya lakukan sejauh ini

— bretauv

Karena jawaban saya sebelumnya agak berantakan dan tidak terlalu rinci, saya membuat jawaban baru yang baik dengan apa yang ingin saya lakukan (yaitu memiliki kemungkinan untuk melipat beberapa potongan kode).

Solusinya adalah dengan menggunakan paket detail Jonathan Sidi , seperti yang ditunjukkan oleh jawaban ini . Awalnya, tujuan dari paket ini adalah untuk menyembunyikan beberapa output yang mengambil banyak ruang, seperti sessionInfo, dalam dokumen HTML yang dibuat dengan R Markdown (dan karenanya dengan R Blogdown juga). Berikut ini sebuah contoh (diambil dari situs web paket):

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

```{r}
library(details)

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

Namun, apa yang ingin saya sembunyikan bukanlah output dari beberapa kode R tetapi kode Stata (yang tidak dimaksudkan untuk dijalankan), sehingga pembaca dapat membandingkan kode R dengan kode Stata jika mereka mau. Karena itu, kita harus menggunakan beberapa HTML untuk melakukannya:

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

Sekarang, pembaca dapat melihat kode Stata jika mereka mau dan mereka yang tidak mau tidak terganggu oleh terlalu banyak potongan kode. Ini berfungsi untuk artikel Blogdown juga (karena itu "hanya" beberapa Markdown R pada situs web).

Fitur lainnya ( sesuaikan bongkahan tersembunyi misalnya) dirinci di situs web paket.

— Bretauv
sumber