Ingredientes:
- Esta gema que me pasó Manuel (otro joya).
- Un pantallazo de Textmate (ya sabéis, te quiero, te odio).
- Un poco de CSS tal que así:
pre {
background-color: black;
color: white;
margin: 1em;
padding: 1em;
}
code span.keyword {color: #de9309}
code span.method {color: #ffffff}
code span.attribute {color: #ff0000}
code span.punct {color: #ffffff}
code span.constant {color: #ffffff}
code span.symbol {color: #3f92b7}
code span.string {color: #00e600}
code span.ident {color: #ffffff}
Resultado:
El sistema de inserción de código de RubyMola, y quizás, por qué no, algún día, de La Coctelera.
Si tienen la más mínima sensibilidad, se recomienda no mirar el diseño de lo que hay fuera del rectángulo negro =:-P
Ummm... yo acabé quitando el plugin que estaba usando para colorear código en WordPress porque el HTML que escupía era una castaña...
Pero hace tiempo me encontré con esto: http://www.dreamprojections.com/syntaxhighlighter/ que es una monería en JS que colorea el código de un textarea sin guarrear el HTML (JavaScript no intrusivo, lo llaman : )
Hay más, seguro, pero este me llamó la atención por lo simple...
No, si eso pensaba yo... Pero el caso es que no es nada guarro, tan sólo mete [span class="loquesea"][/span], lo que además, si ves las clases que usa en el trozo de CSS que he puesto no deja de ser semánticamente impecable, y cambiarte algún símbolo por la entity correspondiente.
Lo del Javascript parece a priori buena idea (por aquello de que trabaje el cliente), sin embargo no termina de entusiasmarme por:
1) Es feo. Simplemente, pero de cojones.
2) Se lo ve cambiar con la página ya cargada. Ver 1)
3) Me parece bastante generoso llamar "no intrusivo" a algo que te obliga a poner en un textarea un contenido que no tiene por qué ser editable, ¿no crees?
Y porque el Javascript me da grima, ya lo sabes =:-P
Hey hey, no te metas con mis amigos, que tavío. Efectivamente hay mejores cosas por ahí, pero creo que el resaltado de sintaxis es uno de esos sitios donde Javascript pega duro.
1) No es nada feo, de hecho es mucho más limpito que un huevo de spans directamente en el contenido ¿son contenido un montón de spans? ¿aporta algo al contenido un span style="color:red"
2) Lo de esperar a que cargue la página se soluciona con un $(document).ready (véase jQuery)
3) No entiendo lo que quieres decir en la 3, pero efectivamente, es no intrusivo (véase separación de comportamiento/presentación/contenido)
¿Son amigos tuyos los del syntax highlighter en Javascript?
Quizá me pasé de expeditivo (a pesar de reconocer que tengo un grave prejuicio contra el JS, que poco a poco va remitiendo gracias a cosas como jQuery o Prototype), pero es que yo sigo siendo un server-side boy, y además de la vieja escuela: deja para el cliente sólo lo que no puedas hacer en el servidor, y te ahorrarás dolores de cabeza, sobre todo en cuanto a compatibilidad de navegadores. El entorno del servidor lo controlas, el del cliente no.
Aparte de la preferencia por la solución más simple. Si algo se puede hacer con "bueno y viejo CSS", no veo el punto en hacerlo con Javascript.
En cuanto al 1, 2, 3:
1) Con feo (por una vez) me refería exclusivamente al resultado estético, que me parece excesivamente recargado. Y eso es incontestable porque sobre gustos no hay nada escrito, y a mí, simplemente, no me gusta. Y en cuanto a si los span son contenido, pues a mí me parece que si en vez de meter style, le metes clases como keyword, attribute, comment, punct o method, pues la respuesta es sí. Puede que sea más detallado de lo necesario, pero semánticamente es impecable.
2) Cierto, y además es una tontería porque sólo ha sido la primera vez, una vez ya he tenido el JS cacheado, no ha vuelto a pasar.
3) Hasta donde yo sé (que no es mucho así que libertad para corregirme), textarea es exclusivamente para contenido editable (al menos yo lo he usado sólo para eso). Si así es (que ya digo que no estoy seguro), al obligarme a meter contenido no editable en un textarea, se está cargando la semántica del documento. Eso de no intrusivo tiene poco =;-)
No son colegas tranqui, era coña.
Sigo sin ver la semántica y/o estructura que añades a un documento por marcar, o más bien por etiquetar lo que es una variable y lo que es una función dentro de un bloque de código.
Respecto a la 1) puedes ver un ejemplo en scriptia, limpio y bonito.
Respecto a la 3), no es necesario un textarea, basta con marcar el código con pre o code.
Ah, pues si te referías al Dr. Naranja y a Don Blat también son amigos míos! =:-D
Sí que añades semántica por cuanto es una descripción del contenido y no de su aspecto. No es lo mismo el ejemplo que ponías de [span style="color: red"] que [span class="keyword"].
El ejemplo de la portada de scriptia (no sé si te referías a ese) es limpio, bonito y con CSS =;-) Además usa unos nombres de clase muy similares a los que te comentaba.
Lo del textarea me habré equivocado, en los ejemplos del enlace que envió Ale aparecía siempre con textarea y me pareció entender que debía ser así. Un problema menos =;-)
La verdad es que ambas opciones son suficientemente buenas, aunque tengan sus pros y sus contras, en realidad no sé aún por cuál decantarme porque ambas me valen.
Sí que añades semántica por cuanto es una descripción del contenido y no de su aspecto. No es lo mismo el ejemplo que ponías de [span style="color: red"] que [span class="keyword"].
Las clases por sí solas no añaden semántica, si al menos me dijeras que vas a utilizar un microformato destinado a tal fin (o incluso a inventarlo si no existe) podría pensar que estás añadiendo algo de pimienta semántica en minúsculas, pero tenemos que ir quitándonos la idea de que class="fecha" añade semántica porque no es así. Si fuera así se mencionaría en el documento de especificación de HTML 4.01
El ejemplo de la portada de scriptia (no sé si te referías a ese) es limpio, bonito y con CSS =;-) Además usa unos nombres de clase muy similares a los que te comentaba.
Es limpito, no semántico y con CSS, claro, pero las clases se inyectan desde javascript so-called no intrusivo, el contenido va limpito utilizando un elemento pre y un code, que es lo que hay que utilizar únicamente para marcar estas cosas.
La verdad es que ambas opciones son suficientemente buenas, aunque tengan sus pros y sus contras, en realidad no sé aún por cuál decantarme porque ambas me valen.
Dime una desventaja de la versión javascript, venga, mójate =:-)
Puede que no sea Semántica con letras mayúsculas al estilo W3C, pero si tú quieres encontrar las palabras clave de Ruby que hay en una página te bastará con buscar por "code.ruby span.keyword", y eso es semántica, en minúsula si quieres, al menos en el mismo sentido que los microformatos lo son. Vamos, que aunque físicamente sea parecido, hay un abismo entre el style="color:red" y el class="keyword".
Lo del ejemplo de la portada de scriptia demuestra mi absoluta ignorancia =:-S Desde el principio había asumido que todas estas movidas de JS tocaban directamente el DOM sin modificar el código, por eso cuando he visto que el código incluía los span's he supuesto que el coloreado se hacía en el servidor. Así que ahora, como soy un desconfiado de mierda, he entrado con el JS desactivado y el cabrón de eĺ sale todo negro =:-D Mea culpa.
En cualquier caso, si al final resulta que todo el mundo mete los span's, sea en el servidor o en el cliente, no sé lo que estamos discutiendo. ¿En qué lenguaje hacerlo?
Así pues, la única pega que por mi parte le resta al enfoque JS es la compatibilidad de los distintos navegadores. Aunque supongo que tampoco importa mucho si estás usando un código de terceros que se encargan de mantener y tal.
Ya sabes, si en nochebuena sale el tema del resaltado de sintaxis, seguramente consigas un segundo "demimismo wins" =;-)
En resumen: demimismo wins.
Tras un apasionado pero amistoso flame, vengo a proponer la solución contraria a la que proponía hace unos días, con la furia del converso...