Afficher plusieurs morceaux de code de manière concise

Je crée un blog avec blogdownlequel je compare le code de R et le code de Stata. Je voudrais montrer les deux codes afin que l'utilisateur puisse comparer comment cela se fait dans R et dans Stata. Cependant, mettre deux morceaux ou plus dans une rangée (code pour R, code pour la sortie Stata +) rend la lecture assez inconfortable.

Plusieurs dispositions me sont venues à l'esprit pour inclure plusieurs morceaux mais je ne sais pas si elles sont déjà implémentées ou s'il est même possible de le faire.

Avoir un bouton pour afficher / masquer les morceaux (un bouton par morceau )

Une idée serait d'avoir:

les morceaux de code R visibles par défaut dans l'article,
le code Stata est invisible par défaut mais visible si l'utilisateur clique sur un bouton

Cette personne et cette personne ont réussi à plier leurs morceaux de code dans blogdown mais apparemment, cela masque ou affiche tous les morceaux par défaut. Comment puis-je masquer uniquement certains morceaux par défaut? Existe-t-il une option (comme les options eval, echo...) qui masque ou affiche le bloc de code blogdown?

Morceaux avec "onglets"

Le titre de cette partie parle de lui-même: est-il possible d'avoir des onglets en morceaux pour passer d'un code à l'autre (comme les onglets des navigateurs web par exemple)?

Afficher deux morceaux côte à côte

Dans certains blogdownthèmes (peut-être tous, je ne sais pas), la largeur est assez réduite et il y a de l'espace inutilisé sur les côtés. Par conséquent, est-il possible d'augmenter la largeur de certaines parties d'un article et d'afficher deux morceaux côte à côte?

Une idée si l'une de ces dispositions peut être réalisée en blogdown?

r blogdown

— bretauv
source

J'ai l'impression que Python et R côte à côte quelque part, je n'ai pas pu le reproduire, en priant pour que quelqu'un résolve cela, j'ai un blog qui s'améliorerait vraiment si c'était possible

— Bruno

Ne blogdownvous permet d'ajouter des CSS? En utilisant CSS, vous pouvez créer deux blocs de code et les mettre côte à côte. Avec CSS, vous pouvez également afficher ou masquer les morceaux et être en mesure de faire les onglets, mais ce n'est pas mon point fort.

— BeastCoder

@BeastCoder Je pense que je blogdownpeux utiliser CSS (voir ici ) mais je ne l'ai jamais utilisé donc j'essaierai mais je ne pense pas pouvoir y arriver

— bretauv

@bretauv Je pense que si vous pouviez comprendre que cela en valait la peine, je peux vous laisser trois tutoriels qui peuvent vous aider à être complètement opérationnel si vous voulez emprunter ce chemin.

— BeastCoder

1. youtu.be/UB1O30fR-EE (qui est un cours intensif HTML) 2. youtu.be/yfoY53QXEnI (qui est un cours accéléré CSS) 3. youtu.be/JJSoEo8JSnc (flexblock) Ces choses devraient pouvoir vous aider les morceaux de code côte à côte, mais ils vous fourniront également des informations futures qui seront toujours utiles. Ajouter le code disparaissant et réapparaissant peut être plus difficile, mais si vous voulez un lien de quelque chose pour vous lancer, faites le moi savoir. Je ne suis pas trop familier avec blogdown mais il pourrait y avoir une autre façon où vous n'avez pas besoin de CSS. De toute façon, je recommanderais le CSS

— BeastCoder

Réponses:

D'accord, voici une réponse partielle. Je pourrais simplement mettre plusieurs morceaux côte à côte mais je ne sais pas comment réaliser les autres propositions dans mon post.

C'est ce que j'ai fait. Sur la base de cette page , j'ai mis du code CSS dans mon .Rmarkdownfichier contenant l'un des articles de mon 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>

Ici, il mettra le code head(mtcars)et sa sortie en deux morceaux côte à côte. Si vous mettez un autre morceau avant </div>, l'ordre sera: un morceau, sa sortie, un morceau, sa sortie, etc. Il existe de nombreuses options pour personnaliser l'affichage des deux (ou plus) colonnes. Il y a plusieurs choses que je ne pouvais pas faire cependant:

Je ne sais pas s'il est possible de commander trois morceaux. Par exemple, si vous ajoutez un morceau après celui avec head(mtcars), l'ordre sera: chunk1, sortie de chunk1, chunk2. Je ne sais pas s'il peut être réorganisé en: chunk1, chunk2, sortie de chunk1.
Si je mets ce code dans un fichier CSS séparé, le morceau concerné sera affiché comme s'il s'agissait de texte normal. Comment puis-je mettre ce code dans un fichier CSS externe? Je sais que cela est expliqué dans le blogdowndu livre , mais je ne pouvais pas le faire fonctionner. Ce que j'ai essayé jusqu'à présent, c'est:
- mettre le code ci-dessus (entre <style>et </style>) dans un fichier que j'ai nommé main.csset que j'ai placé dansthemes/tale-hugo/static/css
- mettre le code ci-dessous au début de mon .Rmarkdownfichier. J'ai essayé de remplacer le chemin par mon chemin absolu vers le fichier main.csset j'ai également essayé de le remplacer style.csspar main.cssdans le code ci-dessous, mais sans succès
```
<html>
    <link rel="stylesheet" href="/css/style.css" />
</html>
```
- J'ai également essayé de mettre le chemin dans customCSS config.tomlmais cela n'a pas fonctionné
Étant donné que CSS semblait fonctionner, je voulais voir s'il était possible de créer des onglets avec. C'est en effet possible, mais cela nécessite du code JavaScript et je ne l'ai jamais utilisé auparavant, donc si quelqu'un peut aider, merci d'avance.

Fondamentalement, il s'agit d'une base de travail qui pourrait être mise à jour si je trouve des solutions, mais si vous savez comment résoudre certains de ces problèmes, n'hésitez pas.

— bretauv
source

@BeastCoder voici ce que j'ai fait jusqu'à présent

— bretauv

Comme ma réponse précédente était un peu désordonnée et pas très détaillée, je fais une nouvelle réponse qui correspond bien à ce que je voulais faire (c'est-à-dire avoir la possibilité de plier des morceaux de code).

La solution est d'utiliser le package de détails de Jonathan Sidi , comme le souligne cette réponse . À l'origine, le but de ce paquet était de cacher certaines sorties qui prennent beaucoup de place, comme sessionInfodans les documents HTML créés avec R Markdown (et donc aussi avec R Blogdown). Voici un exemple (tiré du site Web du package):

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

```{r}
library(details)

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

Cependant, ce que je veux cacher n'est pas la sortie d'un code R mais un code Stata (qui n'est pas destiné à être exécuté), afin que les lecteurs puissent comparer le code R au code Stata s'ils le souhaitent. Par conséquent, nous devons utiliser du HTML pour ce faire:

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

Maintenant, les lecteurs peuvent voir le code Stata s'ils le souhaitent et ceux qui ne le souhaitent pas ne sont pas distraits par trop de morceaux de code. Cela fonctionne aussi pour les articles de Blogdown (car il ne s'agit "que" de quelques R Markdown sur un site Web).

Plus de fonctionnalités ( personnalisez les morceaux cachés par exemple) sont détaillées sur le site Web du package.

— bretauv
source