SyntaxHighlighter son un conjunto de funciones escritas en JavaScript que nos permiten resaltar sintáxis de código fuente escrito en algunos lenguajes de programación, me tarde mucho tiempo hacer que funcione en mi blog, desperdicie varias horas tratando de hacer que funcione de esta manera pero no pude :( y estuve apunto de tirar la toalla, si no fuera porque no tenía nada que hacer y en la tv estaba el noticiero mentiroso de TV Azteca lo más probable es que no lo hubiera vuelto a intentar, la manera de hacerlo funcionar en blogger es muy sencilla, basta con seguir estos pasos.
* Descargar el código fuente. Una vez desempaquetado, los archivos estan organizados en tres directorios: Scripts, Styles y Uncompressed.
* Alojar los archivos necesarios en un sitio público, ya que cada vez que se cargue la página se necesita accesar a dichos archivos, seguí la recomendación del blog antes mencionado y use Google Page Creator. Los archivos SyntaxHighlighter.css y shCore.js son imprescindibles, también necesitamos otros scripts que llamare "bruses" por no saber como nombrarlos y haber leído que alguien los nombraba así :D, los bruses son los archivos con nombre shBrush[lenguaje].js son los que ayudan a dar formato, si por ejemplo queremos publicar código escrito en php necesitamos el archivo shBrushPhp.js, para código en C++ necesitamos shBrushCpp.js.
* Modificar la plantilla actual de nuestro blog (guardar una copia de seguridad), accesamos a Personalizar->Diseño->Edición de HTML y agregamos lo siguiente (yo lo hice justo antes de cerrar la etiqueta head) reemplazando [SERV] por la dirección en la que se encuentran los archivos.
* Ya que hemos hecho esto, nuestro blog esta listo para el resaltado de sintáxis, lo podemos hacer usando las etiquetas pre o textarea usando la siguiente sintáxis:
Para mayor información:
sitio oficial de SyntaxHighlighter
blog que casi me hace llorar de alegría
otro blog de mucha ayuda, no pude hacerlo funcionar de la manera que explica este autor
* Descargar el código fuente. Una vez desempaquetado, los archivos estan organizados en tres directorios: Scripts, Styles y Uncompressed.
* Alojar los archivos necesarios en un sitio público, ya que cada vez que se cargue la página se necesita accesar a dichos archivos, seguí la recomendación del blog antes mencionado y use Google Page Creator. Los archivos SyntaxHighlighter.css y shCore.js son imprescindibles, también necesitamos otros scripts que llamare "bruses" por no saber como nombrarlos y haber leído que alguien los nombraba así :D, los bruses son los archivos con nombre shBrush[lenguaje].js son los que ayudan a dar formato, si por ejemplo queremos publicar código escrito en php necesitamos el archivo shBrushPhp.js, para código en C++ necesitamos shBrushCpp.js.
* Modificar la plantilla actual de nuestro blog (guardar una copia de seguridad), accesamos a Personalizar->Diseño->Edición de HTML y agregamos lo siguiente (yo lo hice justo antes de cerrar la etiqueta head) reemplazando [SERV] por la dirección en la que se encuentran los archivos.
* Ya que hemos hecho esto, nuestro blog esta listo para el resaltado de sintáxis, lo podemos hacer usando las etiquetas pre o textarea usando la siguiente sintáxis:
Para mayor información:
sitio oficial de SyntaxHighlighter
blog que casi me hace llorar de alegría
otro blog de mucha ayuda, no pude hacerlo funcionar de la manera que explica este autor
5 comentarios:
Muy bonito tutorial, lo pondré en práctica.
Ya lo puse en práctica, funcionó a la perfección
yo también ya lo subí, vale señalar que por ahí se me pasaron algunas / antes de cerrar > de la etiqueta script y link creo para que funcionara ...
¿Qué brush uso para simular una código de consola? jajaja :) si no existe hay que hacer uno
Oscar: Yo hice un brush para Bash, tal vez ese te pueda servir, incluso aquí en el blog lo publiqué; también hice uno más extendido con todos los comandos de POSIX, si te interesa los puedes bajar de:
http://bboy.mr.freeze.googlepages.com/shBrushBash.js
http://bboy.mr.freeze.googlepages.com/shBrushTerminal.js
Gracias Saúl, si lo vi, pero no quería uno para bash como tal, solamente para imitar la línea de comandos, básicamente hacer una caja con fondo negro, y los caracteres en blanco, y quizá si le pongo como atributo root automáticamente ponga # y si pones noroot ponga $ al principio
de cualquier forma gracias por tu sugerencia, luego subiré algo ... cuando haga algo realmente entendible :D jejeje
Publicar un comentario