Hiển thị một số đoạn mã theo cách súc tích

Tôi đang tạo một blog blogdowntrong đó tôi so sánh mã từ R và mã từ Stata. Tôi muốn hiển thị cả hai mã để người dùng có thể so sánh cách thực hiện trong R và trong Stata. Tuy nhiên, việc đặt hai hoặc nhiều khối liên tiếp (mã cho R, mã cho đầu ra Stata +) làm cho việc đọc khá khó chịu.

Một số bố cục xuất hiện trong tâm trí của tôi để bao gồm một số khối nhưng tôi không biết liệu chúng đã được thực hiện hay chưa, thậm chí có thể làm như vậy không.

Có một nút để hiển thị / ẩn khối (một nút trên mỗi đoạn )

Một ý tưởng sẽ có:

các đoạn mã R hiển thị theo mặc định trong bài viết,
các đoạn mã Stata được ẩn theo mặc định nhưng hiển thị nếu người dùng nhấp vào nút

Người này và người này đã thành công trong việc gấp các đoạn mã của họ trong blogdown nhưng rõ ràng nó ẩn hoặc hiển thị mọi khối theo mặc định. Làm thế nào tôi có thể ẩn chỉ một số khối theo mặc định? Có một tùy chọn (như các tùy chọn eval, echo...) ẩn hoặc hiển thị đoạn mã trong blogdownkhông?

Chun với "tab"

Tiêu đề của phần này tự nói lên: có thể có các tab trong một đoạn để chúng ta có thể chuyển từ mã này sang mã khác (ví dụ như các tab trong trình duyệt web) không?

Hiển thị hai khối cạnh nhau

Trong một số blogdownchủ đề (có thể là tất cả, tôi không biết), chiều rộng khá giảm và có một số không gian chưa sử dụng ở hai bên. Do đó, có thể tăng chiều rộng trên một số phần của bài viết và hiển thị hai khối cạnh nhau không?

Bất kỳ ý tưởng nếu một trong những bố trí có thể được thực hiện trong blogdown?

r blogdown

— bretauv
nguồn

Tôi có vẻ như Python và R cạnh nhau ở đâu đó, không thể sao chép nó, cầu nguyện cho ai đó giải quyết vấn đề này, tôi có một blog sẽ thực sự cải thiện nếu điều này là có thể

— Bruno

Có blogdowncho phép bạn thêm CSS không? Sử dụng CSS, bạn có thể tạo hai khối mã và đặt chúng cạnh nhau. Với CSS, bạn cũng có thể hiển thị hoặc ẩn các đoạn và có thể thực hiện các tab, nhưng đó không phải là điểm mạnh của tôi.

— BeastCoder

@BeastCoder Tôi nghĩ blogdowncó thể sử dụng CSS (xem tại đây ) nhưng tôi chưa bao giờ sử dụng nó nên tôi sẽ thử nhưng tôi không nghĩ mình sẽ có thể đạt được điều này

— bretauv

@bretauv Tôi nghĩ rằng nếu bạn có thể hiểu nó có thể đáng giá, tôi có thể để lại cho bạn ba hướng dẫn có thể giúp bạn hoàn toàn đứng dậy và chạy nếu bạn muốn đi theo con đường đó.

— BeastCoder

1. youtu.be/UB1O30fR-EE (đó là khóa học sự cố HTML) 2. youtu.be/yfoY53QXEnI (đó là khóa học sự cố CSS) 3. youtu.be/JJSoEo8JSnc (flexblock) Những điều đó sẽ có thể giúp bạn các đoạn mã bên cạnh nhưng họ cũng sẽ cung cấp cho bạn thông tin trong tương lai sẽ luôn hữu ích. Thêm mã biến mất và xuất hiện lại có thể khó hơn nhưng nếu bạn muốn một liên kết của một cái gì đó để bạn bắt đầu trên đó chỉ cho tôi biết. Tôi không quá quen thuộc với blogdown nhưng có thể có một cách khác mà bạn không cần CSS. Dù bằng cách nào, tôi muốn giới thiệu CSS

— BeastCoder

Câu trả lời:

Được rồi đây là một câu trả lời một phần. Tôi chỉ có thể đặt một số khối cạnh nhau nhưng tôi không biết làm thế nào để nhận ra các đề xuất khác trong bài viết của mình.

Đây là những gì tôi đã làm. Dựa trên trang này , tôi đặt một số mã CSS trong .Rmarkdowntệp của mình có chứa một trong những bài viết của blog của tôi.

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

Ở đây, nó sẽ đặt mã head(mtcars)và đầu ra của nó thành hai khối cạnh nhau. Nếu bạn đặt một đoạn khác trước </div>, thứ tự sẽ là: một đoạn, đầu ra của nó, một đoạn, đầu ra của nó, v.v. Có nhiều tùy chọn tùy chỉnh hiển thị của hai (hoặc nhiều) cột. Tuy nhiên, có một số điều tôi không thể làm:

Tôi không biết nếu có thể đặt ba khối. Ví dụ: nếu bạn thêm một đoạn sau một với head(mtcars), thứ tự sẽ là: chunk1, đầu ra của chunk1, chunk2. Tôi không biết nếu nó có thể được sắp xếp lại trong: chunk1, chunk2, đầu ra của chunk1.
Nếu tôi đặt mã này vào một tệp CSS riêng, đoạn liên quan sẽ được hiển thị như thể đó là văn bản bình thường. Làm cách nào để đặt mã này vào tệp CSS bên ngoài? Tôi biết rằng điều này được giải thích trong blogdowns' cuốn sách , nhưng tôi chỉ không thể làm cho nó làm việc. Những gì tôi đã cố gắng cho đến nay là:
- đặt mã ở trên (giữa <style>và </style>) vào một tệp mà tôi đặt tên main.cssvà tôi đã đặtthemes/tale-hugo/static/css
- đặt mã dưới đây vào đầu .Rmarkdowntập tin của tôi . Tôi đã cố gắng thay thế đường dẫn bằng đường dẫn tuyệt đối của mình đến tệp main.cssvà tôi cũng đã cố gắng chỉ thay thế style.cssbằng main.cssmã bên dưới, nhưng không thành công
```
<html>
    <link rel="stylesheet" href="/css/style.css" />
</html>
```
- Tôi cũng đã cố gắng đặt đường dẫn trong customCSS config.tomlnhưng nó không hoạt động
Vì CSS dường như hoạt động, tôi muốn xem liệu có thể tạo các tab với nó không. Điều đó thực sự có thể nhưng nó yêu cầu một số mã JavaScript và tôi chưa bao giờ sử dụng nó trước đây vì vậy nếu ai đó có thể giúp với điều đó, cảm ơn trước.

Về cơ bản, đây là một cơ sở làm việc có thể được cập nhật nếu tôi tìm giải pháp, nhưng nếu bạn biết cách giải quyết một số vấn đề này, đừng ngần ngại.

— bretauv
nguồn

@BeastCoder đây là những gì tôi đã làm cho đến nay

— bretauv

Vì câu trả lời trước của tôi hơi lộn xộn và không chi tiết lắm, tôi đưa ra một câu trả lời mới phù hợp với những gì tôi muốn làm (tức là có khả năng gấp một số đoạn mã).

Giải pháp là sử dụng gói chi tiết của Jonathan Sidi , như được chỉ ra bởi câu trả lời này . Ban đầu, mục đích của gói này là để ẩn một số kết quả đầu ra chiếm nhiều dung lượng, chẳng hạn như sessionInfo, trong các tài liệu HTML được tạo bằng R Markdown (và do đó cũng với R Blogdown). Đây là một ví dụ (lấy từ trang web của gói):

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

```{r}
library(details)

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

Tuy nhiên, điều tôi muốn ẩn không phải là đầu ra của một số mã R mà là mã Stata (không có nghĩa là được chạy), để người đọc có thể so sánh mã R với mã Stata nếu họ muốn. Do đó, chúng ta phải sử dụng một số HTML để làm như vậy:

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

Bây giờ, người đọc có thể thấy mã Stata nếu họ muốn và những người không muốn không bị phân tâm bởi quá nhiều đoạn mã. Điều này cũng hoạt động cho các bài viết trên Blogdown (vì nó "chỉ" một số R Markdown trên một trang web).

Các tính năng khác ( tùy chỉnh các đoạn ẩn chẳng hạn) được nêu chi tiết trên trang web của gói.

— bretauv
nguồn