Publicar codigo en una entrada | Oloblogger Ya me han preguntado en diversas ocasiones cómo publicar código HTML dentro de una entrada. Resulta ...

3 de octubre de 2008

Publicar codigo en una entrada

Ya me han preguntado en diversas ocasiones cómo publicar código HTML dentro de una entrada. Resulta que si se hace a pedal, el código se interpreta y no se ve, que es precisamente lo que pretendemos cuando queremos explicar cómo cambiar tal o cual cosa.

Con código CSS no hay ningún problema, porque el problema reside principalmente en el uso de los símbolos menor y mayor (< >) que en este último caso no se utilizan. Pero para el lenguaje HTML, estos símbolos son el comienzo de una instrucción y, lógicamente, lo que hace es traducirlo e intentar ejecutar lo que hay en su interior. En nuestro caso, esto provocará que el código que pretendiamos colocar no resulte visible, que nos de un error y, en los peores casos, que traduzca parte sí y parte no.

También dan la lata en algunos apartados de la plantilla, los símbolos &, los espacios en blanco o las comillas. Para todo esto, la solución es relativamente sencilla aunque da bastante trabajo. Se trata de sustituir esos símbolos por las siguientes cadenas de caracteres:
&lt;   = <
&gt; = >
&quot; = "
&nbsp; = Espacio en blanco

Habreis podido comprobar también, que cuando quereis alinear datos introduciendo caracteres en blanco, la cosa no funciona bien. Fijaros arriba y vereis que después de los dos primeros casos, se han introducido dos espacios en blanco para que cuadren los símbolos =. Esto se consigue encerrando el texto preformateado entre las etiquetas <pre> y </pre>. Es especialmente útil cuando se quiere mostrar un ejemplo grande de código en el que se han introducido tabulaciones para una mayor claridad.
<HTML>
<BODY>
Este texto tiene dos tabulaciones
8 < 99
Tanto los símbolos "prohibidos" como el texto,
saldrán con el formato deseado usando "<pre>"
</BODY>
</HTML>

En ocasiones bastará con añadir sucesivos &nbsp; para conseguir el mismo resultado, pero lo anterior es más fácil de hacer y más claro a la hora de redactarlo.


También es interesante desde el punto de vista del diseño y, sobre todo, de la claridad de la explicación, conseguir diferenciar la parte que corresponde al código, del resto del texto que lo acompaña.

Para eso, es suficiente con crear en nuetra plantilla una nueva clase CSS con el formato elegido. Luego, cada vez que redactemos algún trozo de código que queramos destacar o diferenciar, habrá que identificarlo haciendo referencia a la clase definida mediante el atributo CLASS. Por ejemplo, si hemos nombrado nuestra clase como .formatocodigo, para mostrar un trozo de HTML tendremos que escribir:

<p class="formatocodigo">
CODIGO
</p>

Definir el borde (border), fondo (background), la fuente de texto (font-family) y el color del texto (color), debe ser suficiente para conseguir un estilo bien diferenciado.

Para facilitar el trabajo de sustitución, podeis utilizar la opción de "reemplazar" de cualquier procesador de texto. O mejor todavía, conversores online de HTML a TEXTO PLANO como los de BlogCrowds, SimpleBits o NoSetUp.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

12 comentarios :

  1. Creo que es algo complejo, personalemente siempre he usado el servicio de simple bits para hacer esto y funciona bastante bien.

    Por cierto, me gusta la manera en que se escriben los comentarios.

    ResponderEliminar
  2. me podrias explicar como hago para que se vean siempre en primer lugar las entradas del blog antiguas,pude cambiarlas en el lado de los archivos pero no se cambia en las entradas por favor si me poder informar gracias

    ResponderEliminar
  3. Que yo sepa, en esta plataforma no hay manera. Es la esencia de un blog: la información más reciente la primera.

    ResponderEliminar
  4. Exelente blog, quisiera saber si es posible añadir un < Script > en una entrada.

    Yo tengo unos "widgets" que para colocarlos como html/javascript no tengo mas que pegar el codigo y isto, se ve en todo el blog perfectamente, pero yo solo quiero colocarlo en una entada ese Script, y al colocarlo alli no aparece.

    Me podrias ayudar o decirme como hago para colocarlo o cambiarlo a < embed > o sino a < Object > esos si me foncionan bien en las entradas.

    verdelegal_web@hotmail.com

    ResponderEliminar
  5. En un principio Business, salvo que tenga caracteres raros, será suficiente con copiar ese script y luego eliminar todos los saltos de línea. Para que un script funcione en una entrada, hay que redactarlo todo seguido, sin saltos.

    ResponderEliminar
  6. Muchas Gracias Me sirvio mucho tu ayuda!
    Otra consulta...

    Se pueden "Ocultar" Jscripts como los que te dije antes en lugares como dice en este sitio la hoja "Ciber-Cafe" osea al hacer click ahi puedo hacer que a mis usuarios les aparezca el jscript?

    Gracias.

    ResponderEliminar
  7. Conozco un par de maneras. La primera es la más fácil:
    http://oloblogger.blogspot.com/2008/02/elementos-que-aparecen.html
    http://oloblogger.blogspot.com/2008/02/en-cualquier-parte-de-la-pgina.html


    http://oloblogger.blogspot.com/2008/05/desplegar-partes-del-blog.html

    ResponderEliminar
  8. Hola Oloman

    A parte del tema de arriba:

    Me hhan dicho varias personas que al entrar en mi blog les da error en la página.El caso es que a mí no.

    No sé que puede ser.
    ¿Cuál es tu opinión?

    Gracias

    ResponderEliminar
  9. No sé Javierlota... ¿que cambien de navegador? :D
    Es que yo no observo ningún problema.

    ResponderEliminar
  10. Bueno...

    Gracias de todas formas

    ResponderEliminar
  11. Excelente blog, de verdad que me ayudan mucho tus tips y la forma de explicar los temas... es excelente!!!

    ResponderEliminar
  12. Thank you very mucho RanRan :D

    ResponderEliminar