Aplicar estilo al código dentro y fuera de los bloques

Hay una codeetiqueta en HTML. Literalmente lo usé para envolver esa etiqueta en la oración anterior, entonces meta. Es un elemento en línea por defecto que denota cualquier tipo de código. Tiene estilos predeterminados (agente de usuario) que aplican una familia de fuentes monoespaciadas, lo que parece un buen valor predeterminado (como es cierto, la mayor parte del código se analiza en monoespaciado).

/* User agent styles in all browsers */code {  font-family: monospace;}

Es probable que también sea algo a lo que le aplican estilo con la etiqueta misma en tus hojas de estilo. Es solo uno de esos elementos en los que parece mucho más natural usarlo sin formato, en lugar de restablecerlo sin estilos y optar por estilos con una clase.

/* You'll probably do this: */code {  /* custom styles */}/* Or maybe scope it to something like: */article code {}/* It seems less common and more annoying to do this: */code {  /* reset styles */}code.some-class {  /* opt-in styles */}

En este sitio ahora mismo (v18), aplica algunos estilos modestos y aplica algunos de ellos dentro de elementos textuales:

/* For all code */code {  font-family: MyFancyCustomFont, monospace;  font-size: inherit;}/* Code in text */p  code,li  code,dd  code,td  code {  background: #ffeff0;  word-wrap: break-word;  box-decoration-break: clone;  padding: .1rem .3rem .2rem;  border-radius: .2rem;}

Una cosa con la que esto ayuda es, digamos, esto:

h3The code.cool/code Class/h3

Mis estilos seguirán haciendo que sea una fuente monoespaciada agradable, con un tamaño igual al del encabezado, pero sin aplicar el color de fondo ni el relleno que me gusta para el código dentro del texto.

Sin embargo, lo más importante cuando se trata de estilos con alcance codees este marcado muy común:

precode  example code block/code/pre

La preetiqueta es importante para mostrar bloques de código, ya que respeta los espacios en blanco en el HTML. Pero semánticamente, sólo significa “texto preformateado”. Si es un bloque de código, codetambién debería haber una etiqueta involucrada. Pero coderecuerda, es un elemento en línea. Además, es muy probable que la forma en que desea que se vea dentro de una oración sea bastante diferente de cómo desea que se vea en un bloque.

Jason estaba tuiteando sobre esto el otro día:

No pensé que este CSS funcionaría, pero funcionó:

/* esto se aplica a TODOS los elementos de código en .post */
.post code {
color: pink;
}

/* esto se aplica SÓLO a elementos de código que no están dentro de una etiqueta previa */
.post :not(pre) code {
color: blue;
}

https://t.co/0Pwnvmpz4q pic.twitter.com/5Z3vAWz1iN

– Jason Lengstorf (@jlengstorf) 27 de diciembre de 2020

Hubo un momento de confusión en el hilo donde:

/* this was working */.post :not(pre) code {}/* and this was not */:not(pre) code {}

El problema con el segundo selector “en la raíz” es que :not(pre)coincidirá con cosas (como body) y, por lo tanto, aplicará esos estilos. Dentro de la publicación (el primer ejemplo), solo seleccionará cosas, como etiquetas de párrafo, imágenes y demás, y por lo tanto se comportará de manera más esperada. Creo que es un buen enfoque. Es solo una forma alternativa de determinar el alcance de esa codeetiqueta de modo que no obtenga ciertos estilos mientras esté dentro de elementos específicos, porque la preetiqueta es la principal preocupación.

Tengo muchos bloques de código en este sitio, así que trato de ser un poco más protector. Diseñé específicamente los codeelementos que están dentro de prelas etiquetas con muchos estilos para que queden como quiero y, potencialmente, lucho contra cualquier otro estilo no deseado que puedan tener. Cosas como:

pre code {  display: block;  background: none;  white-space: pre;  -webkit-overflow-scrolling: touch;  overflow-x: scroll;  max-width: 100%;  min-width: 100px;  padding: 0;}

Mis estilos actuales son un poco más detallados, incluso que eso. No hay nada inteligente en ese fragmento. Solo estoy señalando que aplica una buena cantidad de estilos a los bloques de código para asegurarme de que salgan bien.

Me parece interesante cómo el codeelemento es algo único en la forma diferente en que tendemos a diseñarlo según el contexto.

---

Consideraciones para diseñar la etiqueta “pre”

código Chris Coyier

Componente web para un bloque de código

código Chris Coyier