Pon un trocito de código en tu blog

    
    	
  1. <script>
  2. window.onload = function(){
  3. COLOREAR.start("#listado li");
  4. }
  5. </script>
  6. <ul id=”listado”>
  7. <li>Opcion1</li>
  8. <li>Opcion2</li>
  9. <li>Opcion3</li>
  10. <li>Opcion4</li>
  11. </ul>

Para poner un trozo de código como el de arriba, lo único que se ha de hacer es usar dos estilos diferentes y una etiqueta pre:

    <style type="text/css">
             pre.code {padding:0 0 0 10px; border:#666;background: url(http://huanglu.metropoliglobal.com/wp-content/images/bk-code.gif) no-repeat top left; background-color: #333; width:500px; border:1px solid #ccc; overflow:auto}
             code.code2 {padding:0 0 0 35px; font: 10pt Tahoma; color: #000000; display:block; clear:both; background-color:#efefef; overflow:auto}
    </style>
    <ol>
    <pre class="code">
         <code class="code2">
               <li>Primera linea
               <li>Segunda línea
               <li>...
               </ol>
         </code>
    </pre>

Este código lo que hace es lo siguiente:

  • Se crea el estilo para la caja de texto preformateado <pre> que contendrá la imagen (en nuestro caso es una imagen con la palabra Code sobre un fondo gris oscuro) y un fondo del mismo color de la imagen.
  • Se crea la zona donde se pondrá el código (entre las entiquetas <code> </code>), eligiendo el tipo de letra, el color, y un fondo gris claro, que contraste con el fondo de la canja anterior.
  • Como a la primera caja (la caja de texto preformateado) le hemos dado un padding (margen interior) de 10 puntos en el margen izquierdo, la zona donde se escribe el código queda 10 puntos dentro, haciendo la ilusión del margen oscuro de la izquierda, que no es más que una caja desplazada sobre la de abajo.
  • Para que el código que escribamos no esté cerca del borde, le damos un padding de 35 puntos, obteniendo el resultado visto arriba.
Category(s): General

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *