Exibir vários blocos de código de maneira concisa

Estou criando um blog blogdownno qual comparo o código de R e o código de Stata. Gostaria de mostrar os dois códigos para que o usuário possa comparar como é feito no R e no Stata. No entanto, colocar dois ou mais pedaços seguidos (código para R, código para saída Stata +) torna a leitura bastante desconfortável.

Vários layouts vieram à minha mente para incluir vários blocos, mas não sei se eles já foram implementados ou se é possível fazê-lo.

Tenha um botão para exibir / ocultar blocos (um botão por bloco )

Uma idéia seria ter:

os pedaços de código R visíveis por padrão no artigo,
os blocos de código Stata invisíveis por padrão, mas visíveis se o usuário clicar em um botão

Essa pessoa e essa pessoa conseguiram dobrar seus pedaços de código no blog, mas aparentemente oculta ou mostra todos os pedaços por padrão. Como ocultar apenas alguns pedaços por padrão? Existe uma opção (como as opções eval, echo...) que oculta ou mostra a parte do código blogdown?

Pedaços com "abas"

O título desta parte fala por si: é possível ter guias em um pedaço para que possamos alternar de um código para outro (exatamente como guias em navegadores da Web, por exemplo)?

Exibir dois pedaços lado a lado

Em alguns blogdowntemas (talvez todos, não sei), a largura é bastante reduzida e há algum espaço não utilizado nas laterais. Portanto, é possível aumentar a largura em algumas partes de um artigo e exibir dois pedaços lado a lado?

Alguma idéia de se um desses layouts pode ser realizado blogdown?

r blogdown bretauv
fonte

Eu pareço Python e R lado a lado em algum lugar, não consegui replicá-lo, rezando para alguém resolver isso, tenho um blog que realmente melhoraria se isso fosse possível

Bruno

Permite blogdownadicionar CSS? Usando CSS, você pode criar dois blocos de código e colocá-los lado a lado. Com o CSS, você também pode exibir ou ocultar os trechos e pode fazer as guias, mas esse não é o meu ponto forte.

BeastCoder 15/01

@BeastCoder Eu acho que blogdownposso usar CSS (veja aqui ), mas nunca o usei, então tentarei, mas não acho que conseguiremos isso

bretauv 15/01

@ bretauv Eu acho que se você puder descobrir, pode valer a pena, posso deixar três tutoriais que podem ajudá-lo completamente a funcionar se você quiser seguir esse caminho.

BeastCoder 15/01

1. youtu.be/UB1O30fR-EE (que é um curso intensivo em HTML) 2. youtu.be/yfoY53QXEnI (que é um curso intensivo em CSS) 3. youtu.be/JJSoEo8JSnc (flexblock) Essas coisas devem ser úteis para você os códigos lado a lado, mas também fornecerão informações futuras que sempre serão úteis. Adicionar o código que desaparece e reaparecer pode ser mais difícil, mas se você quiser um link de algo para começar, informe-me. Eu não estou muito familiarizado com o blogdown, mas pode haver outra maneira em que você não precisa de CSS. De qualquer maneira, eu recomendaria o CSS

BeastCoder 15/01

Respostas:

Ok, aqui está uma resposta parcial. Eu poderia colocar vários pedaços lado a lado, mas não sei como realizar as outras proposições no meu post.

Foi o que eu fiz. Com base nesta página , coloquei algum código CSS no meu .Rmarkdownarquivo que contém um dos artigos do meu blog.

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

Aqui, ele colocará o código head(mtcars)e sua saída em dois pedaços lado a lado. Se você colocar outro pedaço antes </div>, a ordem será: um pedaço, sua saída, um pedaço, sua saída, etc. Há muitas opções para personalizar a exibição das duas (ou mais) colunas. No entanto, existem várias coisas que eu não poderia fazer:

Não sei se é possível pedir três pedaços. Por exemplo, se você adicionar um pedaço após o outro head(mtcars), a ordem será: chunk1, saída de chunk1, chunk2. Não sei se ele pode ser reorganizado em: chunk1, chunk2, saída de chunk1.
Se eu colocar esse código em um arquivo CSS separado, o pedaço em questão será exibido como se fosse texto normal. Como posso colocar esse código em um arquivo CSS externo? Eu sei que isso é explicado no blogdown's livro , mas eu simplesmente não podia fazê-lo funcionar. O que eu tentei até agora é:
- coloque o código acima (entre <style>e </style>) em um arquivo que eu nomeei main.csse que coloquei emthemes/tale-hugo/static/css
- coloque o código abaixo no começo do meu .Rmarkdownarquivo. Eu tentei substituir o caminho pelo meu caminho absoluto para o arquivo main.csse também tentei apenas substituir style.csspor main.cssno código abaixo, mas sem sucesso
```
<html>
    <link rel="stylesheet" href="/css/style.css" />
</html>
```
- Eu também tentei colocar o caminho no customCSS, config.tomlmas não funcionou
Como o CSS parecia funcionar, eu queria ver se era possível criar guias com ele. É realmente possível, mas requer algum código JavaScript e eu nunca o usei antes, se alguém puder ajudar com isso, obrigado antecipadamente.

Basicamente, essa é uma base de trabalho que pode ser atualizada se eu encontrar soluções, mas se você souber resolver alguns desses problemas, não hesite.

bretauv
fonte

@BeastCoder, aqui está o que eu fiz até agora

bretauv 15/01

Como minha resposta anterior foi um pouco confusa e não muito detalhada, faço uma nova resposta que é adequada ao que eu queria fazer (ou seja, ter a possibilidade de dobrar alguns trechos de código).

A solução é usar o pacote de detalhes de Jonathan Sidi , como apontado por esta resposta . Originalmente, o objetivo deste pacote era ocultar algumas saídas que ocupam muito espaço, como sessionInfodocumentos HTML feitos com o R Markdown (e, portanto, também com o R Blogdown). Aqui está um exemplo (retirado do site do pacote):

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

```{r}
library(details)

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

No entanto, o que eu quero ocultar não é a saída de algum código R, mas de um código Stata (que não deve ser executado), para que os leitores possam comparar o código R com o código Stata, se quiserem. Portanto, devemos usar um pouco de HTML para fazer isso:

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

Agora, os leitores podem ver o código Stata se quiserem e aqueles que não querem não se distraem com muitos pedaços de código. Isso funciona para artigos do Blogdown também (já que são "apenas" alguns R Markdown em um site).

Mais recursos ( personalizar os pedaços ocultos, por exemplo) são detalhados no site do pacote.

bretauv
fonte