แสดงชิ้นโค้ดหลาย ๆ แบบในเวลาสั้น ๆ

ฉันกำลังสร้างบล็อกblogdownที่ฉันเปรียบเทียบรหัสจาก R และรหัสจาก Stata ฉันต้องการแสดงรหัสทั้งสองเพื่อให้ผู้ใช้สามารถเปรียบเทียบวิธีการทำใน R และ Stata ยิ่งไปกว่านั้นการวางสองชิ้นขึ้นไปในแถว (รหัสสำหรับ R, รหัสสำหรับ Stata + output) ทำให้การอ่านค่อนข้างอึดอัด

มีหลายเลย์เอาต์ในใจของฉันที่จะใส่ชิ้นส่วนหลายอัน แต่ฉันไม่รู้ว่ามันถูกนำไปใช้แล้วหรือเป็นไปได้ที่จะทำเช่นนั้น

มีปุ่มที่จะแสดง / ซ่อนชิ้น (หนึ่งปุ่มต่อชิ้น )

ความคิดหนึ่งจะมี:

โค้ด R ที่มองเห็นได้ตามค่าเริ่มต้นในบทความ
โค้ด Stata จะมองไม่เห็นโดยค่าเริ่มต้น แต่จะปรากฏให้เห็นหากผู้ใช้คลิกที่ปุ่ม

บุคคล นี้และบุคคล นี้ประสบความสำเร็จในการพับส่วนของโค้ดในบล็อกดาวน์ แต่เห็นได้ชัดว่าซ่อนหรือแสดงทุกชิ้นโดยค่าเริ่มต้น ฉันจะซ่อนเฉพาะบางส่วนเป็นค่าเริ่มต้นได้อย่างไร มีตัวเลือก (เช่นตัวเลือกeval, echo... ) ที่ซ่อนหรือแสดงรหัสของโค้ดblogdownหรือไม่?

ชิ้นส่วนที่มี "แท็บ"

ชื่อของส่วนนี้พูดถึงตัวเอง: เป็นไปได้ไหมที่จะมีแท็บเป็นก้อนเพื่อให้เราสามารถเปลี่ยนจากรหัสหนึ่งเป็นรหัสอื่น (เช่นเดียวกับแท็บในเว็บเบราว์เซอร์เป็นต้น)

แสดงชิ้นสองชุดต่อกัน

ในบางblogdownธีม (อาจทั้งหมดฉันไม่รู้) ความกว้างลดลงค่อนข้างมากและมีพื้นที่ด้านข้างที่ไม่ได้ใช้ ดังนั้นจึงเป็นไปได้หรือไม่ที่จะเพิ่มความกว้างในบางส่วนของบทความและเพื่อแสดงสองชิ้นต่อกัน?

ความคิดใด ๆ ถ้าหนึ่งในรูปแบบเหล่านี้สามารถรับรู้ได้ในblogdown?

r blogdown

— bretauv
แหล่งที่มา

ฉันดูเหมือน Python และ R เคียงข้างกันไม่สามารถทำซ้ำได้สวดมนต์ให้ใครสักคนเพื่อแก้ปัญหานี้ฉันมีบล็อกที่จะปรับปรุงได้ถ้าเป็นไปได้

— Bruno

ไม่blogdownอนุญาตให้คุณเพิ่ม CSS? การใช้ CSS คุณสามารถสร้างโค้ดสองบล็อกและวางไว้ข้างๆกัน ด้วย CSS คุณสามารถแสดงหรือซ่อน chunks และอาจทำแท็บได้ แต่นั่นไม่ใช่จุดแข็งของฉัน

— BeastCoder

@BeastCoder ฉันคิดว่าblogdownสามารถใช้ CSS (ดูที่นี่ ) แต่ฉันไม่เคยใช้ดังนั้นฉันจะลอง แต่ฉันไม่คิดว่าฉันจะสามารถทำสิ่งนี้ได้

— bretauv

@Bretauv ฉันคิดว่าถ้าคุณสามารถคิดออกมันอาจจะคุ้มค่าฉันสามารถปล่อยให้คุณสามแบบฝึกหัดที่สามารถทำให้คุณสมบูรณ์และทำงานหากคุณต้องการที่จะใช้เส้นทางนั้น

— BeastCoder

1. youtu.be/UB1O30fR-EE (นั่นคือหลักสูตร HTML crash) 2. youtu.be/yfoY53QXEnI (นั่นคือหลักสูตร CSS ผิดพลาด) 3. youtu.be/JJSoEo8JSnc (flexblock) สิ่งเหล่านั้นควรจะทำให้คุณได้รับ โค้ดด้านข้าง แต่พวกเขาจะให้ข้อมูลกับคุณในอนาคตซึ่งจะเป็นประโยชน์เสมอ การเพิ่มโค้ดที่หายไปและการปรากฏขึ้นอีกครั้งอาจจะยากขึ้น แต่ถ้าคุณต้องการลิงค์ของบางสิ่งที่จะช่วยให้คุณเริ่มต้นได้เพียงแจ้งให้เราทราบ ฉันไม่คุ้นเคยกับบล็อกมากเกินไป แต่อาจมีอีกวิธีที่คุณไม่ต้องการ CSS ไม่ว่าจะด้วยวิธีใดฉันจะแนะนำ CSS

— BeastCoder

คำตอบ:

ตกลงนี่เป็นคำตอบบางส่วน ฉันสามารถใส่หลายชิ้นไว้เคียงข้างกัน แต่ฉันไม่รู้วิธีรับรู้ข้อเสนออื่น ๆ ในโพสต์ของฉัน

นี่คือสิ่งที่ฉันทำ จากหน้านี้ฉันใส่โค้ด 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>ลำดับจะเป็น: อัน, เอาท์พุท, อัน, เอาท์พุท ฯลฯ มีหลายตัวเลือกปรับแต่งการแสดงผลของสองคอลัมน์ (หรือมากกว่า) อย่างไรก็ตามมีหลายสิ่งที่ฉันทำไม่ได้:

ฉันไม่รู้ว่าจะสั่งสามชิ้นได้ไหม ตัวอย่างเช่นหากคุณเพิ่ม chunk ตามhead(mtcars)ลำดับคำสั่งจะเป็น: chunk1, output ของ chunk1, chunk2 ฉันไม่รู้ว่าสามารถจัดเรียงใหม่ได้ใน: chunk1, chunk2, output ของ chunk1
หากฉันใส่รหัสนี้ในไฟล์ CSS แยกชิ้นส่วนที่เกี่ยวข้องจะแสดงราวกับว่าเป็นข้อความปกติ ฉันจะวางรหัสนี้ในไฟล์ CSS ภายนอกได้อย่างไร ฉันรู้ว่าเรื่องนี้จะมีการอธิบายในblogdown's หนังสือแต่ฉันก็ไม่สามารถทำให้มันทำงาน สิ่งที่ฉันพยายามทำคือ:
- ใส่รหัสด้านบน (ระหว่าง<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 และฉันไม่เคยใช้มาก่อนดังนั้นหากใครสามารถช่วยได้ขอขอบคุณล่วงหน้า

โดยทั่วไปนี่เป็นพื้นฐานการทำงานที่อาจได้รับการปรับปรุงหากฉันค้นหาวิธีแก้ไข แต่ถ้าคุณรู้วิธีแก้ปัญหาเหล่านี้อย่าลังเล

— bretauv
แหล่งที่มา

@BeastCoder นี่คือสิ่งที่ฉันทำมาจนถึงตอนนี้

— bretauv

เนื่องจากคำตอบก่อนหน้าของฉันค่อนข้างยุ่งและไม่ละเอียดมากฉันจึงสร้างคำตอบใหม่ที่ใช้ได้กับสิ่งที่ฉันต้องการ (เช่นมีความเป็นไปได้ที่จะพับโค้ดบางส่วน)

ทางออกคือใช้แพ็คเกจรายละเอียดของ Jonathan Sidi ตามที่ระบุไว้ในคำตอบนี้ แต่เดิมจุดประสงค์ของแพ็คเกจนี้คือเพื่อซ่อนเอาต์พุตบางส่วนที่ใช้พื้นที่มากเช่น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
แหล่งที่มา