Como desplegar Codigo


Esto es aplicable para cualquier plataforma de Blogs (Blogger, WordPress…)
Como han visto en los post anteriores, siempre es útil desplegar los códigos para realizar cambios en la plantilla o en cualquier otra parte..
Yo utilizo el <textarea>, de esta manera lo único que deben hacer tus visitas es seleccionar el texto dentro del cuadro y copiarlo, así evitamos bastantes errores.
Y lo que obtenemos es algo así, con el código que necesitamos en su interior:

Primero se debe tener en cuenta que la forma en la que se despliegue el código depende de la utilización de la etiqueta <pre> antes y después de textarea. Si se usa, no se desplegaran <br/> al interior del código (representa el salto de linea), en cambio si no se usa se desplegaran los <br/> cada vez que haya un salto de linea.

Entonces para desplegar una de estas cajitas lo único que tienen que escribir es lo siguiente:



Y si no quieren que aparezcan los saltos de linea (<br/>), entonces este es el código:

  1. <pre><textarea class="code" cols="30" rows="3" Wrap=off style="background-color:#ffffcc">AQUI ESCRIBEN EL CODIGO QUE QUIEREN DESPLEGAR</textarea></pre>

Como resultado obtienen Esto:

El cols, se refiere a las columnas,o sea cuantas letras, para el caso de arriba pueden contar, son 30 letras o espacios para escribir.

El rows, a las filas, o sea 2.

El background-color, al color de fondo, que en este caso es amarillo.

El Wrap=off, es para que aparezca la barra de deslizamiento de abajo.

Si eliminan del código el Wrap=off, lo que se despliega queda sin la barra abajo, así:

NOTA: “DESVENTAJAS DE USAR EL TEXTAREA” CUANDO UTILIZAMOS ETIQUETAS QUE AL PARECER SON CRITICAS DE BLOGGER COMO EL HEAD, div U OTRAS, PUEDE PROVOCAR PROBLEMAS..de hecho generalmente aparece el aviso de html incorrecto, errores por cierre de etiquetas, entre otros.

Por esto aveces es mejor utilizar simplemente la etiqueta code (no genera problemas al tratar de publicar el post), de tal manera:

  1. <code>&lt;body&gt;</code>

Como resultado de lo anterior obtenemos lo siguiente:

<body>

Para wordpress tenemos varios plugins interesantes, los que estoy usando en este mismo artículo son el iG:Syntax Hiliter y el Prettify Code Syntax. La instalación y los detalles estan en la misma página de wordpress, pueden revisar las pestañas: Description, Installation, FAQ, Screenshots, Changelog, Stats, Support, Reviews, Developers.

Y eso es todo…
Suerte!!!

Artículos Relacionados

  • Redondear fotos Existe una herramienta con la cual podemos redondear las esquinas de cualquier imagen que queramos, la podemos subir desde nuestro pc o colocando la Url de la imagen. Entren a RoundPic […]
  • Otro lugar para subir Archivos Para los que necesitan compartir archivos con sus visitas, les aviso de este sitio "MEDIAFIRE". Ayer lo probé y me pareció bastante rápido y lo mejor es que se pueden bajar todos los […]
  • Promociona tu blog en Directorios Una de las formas de tener visitas es incluyendo la url de tu blog en distintos directorios o buscadores de blogs. Algunos son solo para los paises determinados, y no los dejaran incluir […]
  • Como puedo tachar un texto que ya he escrito para señalar que ya no sirve o que ya esta hecho, Todas Es muy simple Por ejemplo si quiero poner una lista de cosas por hacer, y quiero demostrar de alguna forma que algunas ya están hechas entonces hago esto: [html] Así: Tarea 1:... Tarea […]
  • Encuestas que Rotan de Bravenet, Muchas en el mismo lugar, Blogger Este Post es aplicable en cualquier plataforma de Blogs (Blogger, WordPress...) o Página web. Primero debemos registrarnos, para registrarte haz clic aquí (una vez que veas la siguiente […]
  • Autopinger Es un servicio online muy bueno. Puedes hacer un ping con la informacion de tu blog a una lista de buscadores de blogs, de dos formas: 1.- Manualmente, para eso tienes que ir a la pagina […]
Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.

About patriram

Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.

Leave a Reply

Your email address will not be published. Required fields are marked *