“Zebreado” con CSS

Había visto antes varias soluciones para mostrar código fuente “zebreado” (alternando el color de fondo en cada linea) en las webs, pero ninguna me convencía del todo, más que nada porque se hacía uso de demasiado codigo HTML, usando, por ejemplo, diferentes clases CSS en cada linea de una tabla o en los elementos de una lista.
Así que se me ocurrió intentar conseguir lo mismo utlizando solo CSS, y aquí teneis el resultado.

Para utilizar este método, teneis que seguir los siguientes pasos:

  1. Crear una imagen de 1px de ancho y 32px (el doble de la altura de linea). Los 16px superiores los rellenareis de un color y los 16px inferiores de otro. (La que yo uso es esta: bg-code.png)
  2. (Re)Establecer los atributos CSS de la etiqueta <code> de la siguiente manera:
    code {
      display: block;
      white-space: pre;
      font-family: "Courier New", Courier, mono;
      font-size: 11px;
      line-height: 16px;
      background-image: url(bg-code.png);
      padding-left: 4px;
      overflow: auto;
    }
  3. Cada vez que vayais a poner algún codigo fuente en vuestra web, solo tendreis que englobarlo entre las etiquetas <code> y </code>

Si bien esa es la solución más semánticamente correcta ya que utiliza la etiqueta <code>, en muchos CMS (p.ej. WordPress) tendremos problemas con la misma, debido a que cuando escribimos algo los saltos de linea de texto (n) son automáticamente transformados en saltos de linea HTML (<br />)..
La solución (en WordPress) pasa por utilizar la etiqueta <pre> en vez de <code>, y crear una clase CSS asociada, que usaremos para presentar código fuente por pantalla, de forma que quedaría así:

pre.code {
  display: block;
  white-space: pre;
  font-family: "Courier New", Courier, mono;
  font-size: 11px;
  line-height: 16px;
  background-image: url(bg-code.png);
  padding-left: 4px;
  overflow: auto;
}

Comentar aparte, que si quereis cambiar la altura de linea (line-height), lógicamente tendreis que modificar también la imagen de fondo estableciendo el alto al doble del la altura de linea. Por ejemplo, para un line-height: 14px;, creareis una imagen de 28px de alto.

Anuncios

7 pensamientos en ““Zebreado” con CSS

  1. Pingback: Juglar :: Trucos breves con CSS :: July :: 2005

  2. McLarenX

    Hola, copiado tu forma de modificar la etiqueta <code> pero no me funciona (en WordPress). Lo he intentado con pre.code pero sigue saliendo igual, vamos, como si no leyera el nuevo estilo CSS que creo. Alguna idea más?

    Me gusta

    Responder
  3. IoZ

    McLarenX,
    ¿Que versión de WordPress utilizas?
    ¿Usas el editor de texto enriquecido?
    ¿Has probado a borrar la cache del navegador para forzar la recarga de la CSS?

    Me gusta

    Responder
  4. McLarenX

    Hola IoZ, gracias por contestar tan rápido.
    Utilizo la versión 2.1.3 de WordPress
    Utilizo el editor de texto enriquecido, pero he puesto las etiquetas y desde la pestaña “Codigo” (como es lógico).
    He probado a borrar la cache, incluso lo he mirado desde otro navegador y otro ordenador y nada… me sale igual que si pongo <code>

    Me gusta

    Responder
  5. IoZ

    McLarenX,
    Pues así en frío no se cual podrá ser el problema.
    Esta noche si tengo un hueco hago unas pruebas en una versión de WordPress igual que la tuya y te digo algo.

    Salu2

    Me gusta

    Responder

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s