Colorear código fuente para mostrar en web

Primera opción

Si necesitas colorear código fuente para colocar en web, puede interesarte alguna de las siguientes opciones:

una web, donde se ofrece una herramienta gratuita que te da la solución. La herramienta se llama GeSHi Script, y la web es http://www.scourdesign.com/articulos/tutoriales/colorear/index.php

Para colorear un código verás un espacio donde pegarlo, después seleccionar el lenguaje utilizado y listo.

La herramienta te devuelve tres cosas:

• tu código coloreado perfectamente tal y como se verá en web
• el código fuente html que pinta tu nuevo código coloreado
• las reglas de estilos CSS utilizadazas y necesarias para que funcione

La primera vez que colorees código en un lenguaje necesitarás las 2 últimas cosas, y de ahí en adelante, si has añadido las reglas CSS a tu hoja de estilos, ya simplemente necesitarás el código fuente generado.

Segunda opción

La segunda opción para colorear código es CodeHighlighter y está disponible en DanWebb.net. Con esta opción se colorea automáticamente tu código. Con esto quiero decir que el paso, de la primera opción, de coger tu código fuente y generar para ese código concreto el html que lo genera coloreado nos lo saltamos.

CodeHighLighter consiste en unos ficheros JavaScript que colorean el código al cargarse la página.

Para utilizar esta herramienta tendrás que:

• referenciar los ficheros .js que colorean el código
  

  
  <script type="text/javascript"
            src="code_highlighter.js">
  </script>
  <script type="text/javascript"
            src="javascript.js">
  </script>
  <script type="text/javascript"
            src="css.js">
  </script>
  <script type="text/javascript"
            src="html.js">
  </script>
  <script type="text/javascript"
            src="ruby.js">
  </script>
  



• Definir en tu hoja de estilos nuevas clases para dar color, que utilizan los .js
  

  
  pre {
  border: 1px solid black;
  border-color: #BBB #DDD #DDD #BBB;
  padding: 0.2em 1em;
  line-height: 1.2;
  background: white;
  }
  code {
  font-size: 1.2em;
  }
  .javascript .comment, .ruby .comment {
  color : green;
  font-weight: bold;
  }
  .javascript .string, .ruby .string {
  color : teal;
  }
  .javascript .keywords, .ruby .keywords {
  color : navy;
  }
  .javascript .global {
  color : blue;
  }
  .javascript .brackets, .ruby .brackets {
  color : navy;
  }



• cuando quieras colorear un código tendrá que ponerlo sencillamente de este modo:
  

  
  <pre><code class="ruby">  def foo
   puts "bar"
  end
  </code></pre>
  

  
  Se puede ver, se dice el lenguaje utilizado con el atributo class.
  

La pega que tiene este sistema es que podrás descargar sólo funciones para colorear html, javascript, ruby y css. Pero no te preocupes, porque ampliarlo es muy fácil y podrás hacerlo para el lenguaje que quieras definiendo palabras reservadas, separadores y demás en unas pocas líneas.