Google Code prettify, resalta sintáxis en HTML

Google Code prettify es un módulo que hace uso de Javascript y CSS para resaltar la sintáxis de código fuente en una página HTML. Si tu tiene un blog donde escribes códigos de diversos lenguajes (C, Basic, Javascript, Ruby, etc) puedes hacer uso de esta pequeña utilidad.

Configuración 

  1. Descarga el Code prettify.
  2. Agrega la referencia al archivo Javascript y CSS en tu página web de esta manera:
    <link href="prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="prettify.js"></script>
  3. Agrega onload="prettyPrint()" a la etiqueta body del código HTML.
  4. Puedes modificar la hoja de estilos para darle los colores que tu prefieras.

Uso

Coloca en el atributo class de las etiquetas pre y code "prettyprint": <pre class="prettyprint">...</pre> ó <code class="prettyprint">...</code>, así de manera automática se resaltara (ó coloreará) la sintáxis de nuestros códigos en nuestras páginas web.

 

Code Prettifier Ejemplo

 

Enlace | Documentación

Compartir/Guardar artículo

Comentarios

  1. avatar martinpulido 2007-06-28 11:15:36 5 ¡Que bueno! No conocía esta posibilidad, había visto el IG Sintax Hilter, pero no me acababa de convencer.

    Este tiene muy buena pinta.

    Salu2
    Santi M.
  2. avatar jesusvld 2007-06-22 22:36:18 4 No he usado Blogger así que no sabria decirte. Pero he visto blogs en Blogger que son personalizados pero no se hasta que punto pueda ser personalizado.
  3. avatar alexis 2007-06-22 18:27:04 3 tu sabras de una forma de implementarlo en blogger?
  4. avatar Alma Fernandez 2007-06-14 12:28:22 2 Hace tiempo hice un plugin para WordPress con este script, no tiene demasiado mérito pero ahorra el tener que editar un theme a mano para añadirlo, lo tenéis en http://www.webmasterlibre.com/2007/03/22/code-prettify-resaltado-de-sintaxis-con-javascript-para-wordpress/ está actualizado a la última versión del google code prettify. Espero que os sirva para algo, yo es el que uso en el blog
  5. avatar david 2007-06-14 06:22:54 1 muy util, como siempre los posts en tu blog.
    gracias y espero que sigas asi muchooooo tiempo <img style="border:0px;" src="/img/caritas/feliz.gif" alt="feliz" title="Feliz" width="18" height="18" />
    saludos

Dejar un comentario


Navegación

Categorias

Archivos