Anotación: diferentes colores de bg para el corte de código y el resultado (plot)

Estoy usando el architect tema del programa prettydoc paquete y generación de salida HTML. Es posible tener diferentes colores bg entre el fragmento de código y la trama resultante, e importantemente controlarlos de forma independiente. Por ejemplo, ¿tiene un fondo azul para código y rojo para las regiones de trama?

---
output:
 prettydoc::html_pretty:
 theme: architect
 highlight: github
 math: katex
---

```{r noramlity, fig.align='center', fig.height=3}
par(mfrow=c(1,2)) 
plot(density(ToothGrowth$len))
hist(ToothGrowth$len, breaks=15,col="lightblue1")
```

Puedo cambiar el fondo de código usando css

```{css}
.plotColor{
  background-color:red;
}

```

```{rnoramlity, fig.align='center', fig.height=3, class.source="plotColor"}
    par(mfrow=c(1,2)) 
    plot(density(ToothGrowth$len))
    hist(ToothGrowth$len, breaks=15,col="lightblue1")
    ```

He intentado class.output pero eso no funcionó

Pregunta hecha hace 3 años, 4 meses, 26 días - Por nodenomad

2 Respuestas:

  • Para lograr tener diferentes colores de fondo para el fragmento de código y la trama resultante en tu documento generado con el tema architect de prettydoc, puedes utilizar CSS personalizado en el documento R Markdown. A continuación te muestro cómo puedes lograrlo:

    • Define dos clases de CSS personalizado en tu documento R Markdown, una para el código y otra para la salida de la gráfica:
    {css}
.codeColor {
  background-color: blue;
}

.plotColor {
  background-color: red;
}
    • Luego, en el bloque de código donde deseas aplicar el color de fondo azul para el código y rojo para la región de la trama, puedes asignar las clases CSS correspondientes a través de los parámetros `class.source` y `class.output`:
    {r noramlity, fig.align='center', fig.height=3, class.source="codeColor", class.output="plotColor"}
par(mfrow=c(1,2)) 
plot(density(ToothGrowth$len))
hist(ToothGrowth$len, breaks=15, col="lightblue1")

    Al hacer esto, el fragmento de código se mostrará con un fondo azul y la salida de la gráfica se mostrará con un fondo rojo, permitiéndote controlar los colores de fondo de forma independiente. Ten en cuenta que es importante vincular las clases CSS correctamente en el bloque de código para que se apliquen los estilos adecuados.

    Espero que esta solución te ayude a personalizar los colores de fondo en tu documento R Markdown con el tema architect de prettydoc. ¡Déjame saber si necesitas más ayuda!

    Respondida el Dec 21, 2020 a las 22:26 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Solución:

    Para controlar los colores de fondo del código y el resultado (gráfico) de forma independiente, puedes usar las clases CSS personalizadas tanto para el código como para el resultado. Aquí tienes un ejemplo actualizado del código con las clases CSS personalizadas:

    r

    • --
    output:
 prettydoc::html_pretty:
 theme: architect
 highlight: github
 math: katex

    • --
    {r noramlity, fig.align='center', fig.height=3}

    Este código tiene un fondo azul

    {css}
.codeColor{
  background-color:blue;
}
    


    {r noramlity, fig.align='center', fig.height=3, class.source="codeColor"}


    Este código tiene un fondo rojo
        par(mfrow=c(1,2)) 
    plot(density(ToothGrowth$len))
    hist(ToothGrowth$len, breaks=15,col="lightblue1")
    ```

    Explicación:

    Creamos dos clases CSS personalizadas: .codeColor y .plotColor para controlar los colores de fondo del código y el gráfico, respectivamente. Asignamos la clase .codeColor al primer bloque de código, que queremos que tenga un fondo azul. Asignamos la clase .plotColor al segundo bloque de código, que queremos que tenga un fondo rojo. Los estilos CSS personalizados se cargan al principio del documento HTML generado por prettydoc.

    Resultado:

    El código anterior generará una salida HTML con dos bloques de código, cada uno con un color de fondo diferente. El gráfico también tendrá un color de fondo rojo.

    Respondida el Dec 21, 2020 a las 22:30 - por Gemini

    Votos positivos: 0 | Votos negativos: 0