Mostrando código de forma elegante
Publicado el Lunes 12 de Febrero del 2007 @ 1:39 por Armonth.
Hasta ahora no le había prestado atención, pero tener líneas de código largas que hacen scrolling, quedan tapadas por el menú o quedan feas no es lo mejor para un sitio que suele mostrar código.
La etiqueta <pre> es perfecta para mostrar código, pero no tiene en cuenta dicha limitación y ni siquiera puedes especificarle que auto-corte el texto (además que para copiar y pegar no conviene nada los cortes).
Ya había visto en otras ocasiones personas que lo solucionaban de forma más o menos elegante, principalmente usando un input de formulario que es lo más fácil pero no es lo más semántico y — sobretodo — es un dolor de muelas cambiar todos los <pre> de casi 1000 entradas a input (y no vale buscar y reemplazar ya que uso Markdown).
Pero la solución la tenía ante mis narices y no pensé en usarla y eso que muchos temas — y algunos famosos — la usan, hablo del overflow:auto;.
Con ello se hace scroll lateral automáticamente cuando hay líneas demasiado largas, aunque es bueno especificar un width: para forzarlo:
pre {
overflow: auto;
width: 90%;
}
Luego ya, lo demás es cuestión de aplicar estilo, por ejemplo si queremos que también nos haga scroll vertical, aunque yo no lo recomiendo, se puede especificar un máximo de ancho vertical con height.
pre {
overflow: auto;
width: 90%;
height: 50px;
}
Con el height a 50px (suponiendo 4 líneas de 12px) todo código con más de 50px de alto (más de esas 4 líneas) mostrará un scroll vertical.
A mí me gusta más ver todo el código sin tener que hacer scroll vertical, a lo máximo scroll horizontal cuando son líneas demasiado largas, pero en casos en los que hay limitaciones de espacio con width y height podemos manejarlo a nuestro gusto.
6 Comentarios (feed)
-
InKiLiNo nos comenta:
A mi también me gusta más así, pero con un background clarito y un border de 1px, y en la izquierda una imagen que ponga codigo o un border más ancho(8px) quedan más elegantes.
-
Armonth nos comenta:
El borde queda elegante sólo si no hay scrolling, si no queda fatal :\
-
InKiLiNo nos comenta:
Y como evitas el scrolling inferior si no puedes cortar el código :P
-
Armonth nos comenta:
InKiLiNo pues por eso no le pongo borde, además el que no me gusta es el scrolling horizontal (el de la derecha, vamos)…
-
Jesús nos comenta:
Otra opción más currada sería utilizar un resaltado de sintaxis
-
Armonth nos comenta:
No me gustan los resaltados de sintaxis, para un código extenso significa añadir cientos de spans y luego total, te bajas el código y ya lo resaltas con el programa que más te guste…
