Google Code Prettify, Es un módulo de Javascript y CSS de archivos que permite resaltado de sintaxis de fragmentos de código fuente en una página HTML.
Características
Obras en las páginas HTML
Funciona incluso si el código contiene los enlaces incorporados, los números de línea, etc.
API simple: incluir algunos JS y CSS y añadir un controlador onLoad.
Peso ligero: pequeña descarga y no bloquea la página de la carga mientras se ejecuta.
Estilos personalizables a través de CSS. Vea la galería de temas.
Soporta todos los idiomas de tipo C, Bash-like, y como XML. No hay necesidad de especificar el idioma
Manejadores de lenguaje extensible para otros idiomas. Puede especificar el idioma.
Ampliamente utilizado con buen cross-browser apoyo. Poderes code.google.com y stackoverflow.com
Añadirlo en Blogger
Principalmente antes de iniciar vamos a descargar los archivos fuente que utilizaremos, esto lo hacemos en el siguiente enlace: prettify-small.zip, se descomprimen los archivos y los subes a tu hosting o servicio de alojamiento, puedes utilizar Skydrive y Google Sites, Luego de ello incluimos estos archivos antes de la etiqueta
Para reducir la carga puedes incluir el código CSS directamente en el blog, añadiéndolo de la siguiente manera:
Ahora solo queda pegar el código al final de la sección de CSS de su plantilla de blogger html (es decir, después de
Lo siguiente es llamar a la función prettyPrint al cargar la entrada que contenera el código que queramos añadir, eso lo haremos en el evento onLoad, Es decir, buscamos la etiqueta
Listo, con eso ya solamente nos faltaría añadir nuestro código entre las etiquetas:
También de está forma:
Con eso obtendríamos nuestro código resaltado en nuestra entrada, puedes ver una página de ejemplo.
ReferenciasResaltar código en HTML
Características
Añadirlo en Blogger
Principalmente antes de iniciar vamos a descargar los archivos fuente que utilizaremos, esto lo hacemos en el siguiente enlace: prettify-small.zip, se descomprimen los archivos y los subes a tu hosting o servicio de alojamiento, puedes utilizar Skydrive y Google Sites, Luego de ello incluimos estos archivos antes de la etiqueta
</head> con el siguiente código:[<link type="text/css" rel="stylesheet" href="prettify.css" /> <script type="text/javascript" src="prettify.js"></script>]
Para reducir la carga puedes incluir el código CSS directamente en el blog, añadiéndolo de la siguiente manera:
[/* Pretty printing styles. Used with prettify.js. */ .str { color: #080; } .kwd { color: #008; } .com { color: #800; } .typ { color: #606; } .lit { color: #066; } .pun { color: #660; } .pln { color: #000; } .tag { color: #008; } .atn { color: #606; } .atv { color: #080; } .dec { color: #606; } pre.prettyprint { padding: 10px; border: 1px solid #CCCCCC; } @media print { .str { color: #060; } .kwd { color: #006; font-weight: bold; } .com { color: #600; font-style: italic; } .typ { color: #404; font-weight: bold; } .lit { color: #044; } .pun { color: #440; } .pln { color: #000; } .tag { color: #006; font-weight: bold; } .atn { color: #404; } .atv { color: #060; } }]
Ahora solo queda pegar el código al final de la sección de CSS de su plantilla de blogger html (es decir, después de
<b:skin>).Lo siguiente es llamar a la función prettyPrint al cargar la entrada que contenera el código que queramos añadir, eso lo haremos en el evento onLoad, Es decir, buscamos la etiqueta
<body> y la reemplazamos por:[<body onLoad="prettyPrint()">]
Listo, con eso ya solamente nos faltaría añadir nuestro código entre las etiquetas:
[<pre class="prettyprint"> Aqui nuestro código... </pre>]
También de está forma:
[<code class="prettyprint"> Aqui nuestro código... </code>]
Con eso obtendríamos nuestro código resaltado en nuestra entrada, puedes ver una página de ejemplo.
Referencias
