Resaltar código en HTML

Google Code Prettify es una librería Javascript que en conjunto con un CSS permite resaltar código fuente de acuerdo a la sintaxis. Esto es muy útil para personas que desean mostrar código fuente legible en una web sin necesidad de estar coloreando manualmente el código.

code-prettify.gif

Utilización
Lo primero es descargar los archivos fuente, esto lo hacemos desde prettify-small.zip, se descomprimen los archivos y se copian los archivos prettify.js y prettify.css. Luego de ello incluimos estos archivos al html que estamos creando de la forma:

  1. <link type="text/css" rel="stylesheet" href="prettify.css" />
  2. <script type="text/javascript" src="prettify.js"></script>

Lo siguiente es llamar a la función prettyPrint al cargar la página html, ello lo hacemos en el evento onLoad, de la forma:

  1. <body onLoad="prettyPrint()">

Finalmente al código que deseamos resaltar con colores lo encerramos entre tags pre y aplicamos la clase prettyprint, esto de la forma:

  1. <pre class="prettyprint">
  2. // código fuente a colorer
  3. </pre>

Pueden ver un ejemplo funcionando en: http://samples.unijimpe.net/prettify.htm, y como verás es muy sencillo de utilizar. También les dejo los archivos fuente para descargar.

Comentarios Total 2 comentarios


Alan
Publicado: 08/09/2009 1:30 pm

con otros colores se veria mejor.

cesar
Publicado: 28/07/2014 1:54 pm

Muchas graciasss! excelente publicación.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)