Alex Gorbatchev lleva haciendo un muy buen trabajo y aportando mucho a la comunidad de código libre desde hace ya mucho tiempo. En concreto uno de los proyectos que comenzó, "SyntaxHighlighter", es una de las cosas con más utilidad indirecta, que me he encontrado en ya unos cuantos años de desarrollo software. Pensad cuantas veces habéis llegado a una web o blog, donde una entrada incluía esas líneas de código que conseguían que el resto de vuestro programa tuviera sentido para la máquina que lo ejecutaba. ¿Y cómo se formatea ese código, con comentarios en verde y el número de línea?, pues una de las opciones más usadas es esta herramienta, realizada en css/javascript y autocontenida. ¿Y cómo incluirla en Blogger?:
- Ve a http://www.blogger.com y en la flecha desplegable al la izquierda de 'Ver blog' selecciona Plantilla.
- Tienes que hacer clic en 'Edición de HTML'. Todas las plantillas no te permiten esa opción (por ejemplo las 'Vistas dinámicas'), así que tendrás que seleccionar una plantilla que sí te lo permita (por ejemplo 'Sencillo').
- Luego de cliquear en 'Edición de HTML', te mostrará una advertencia, pero vamos a arriesgarnos y hagamos de nuevo clic en 'Continuar'.
- Buscamos (Ctrl+F o Ctrl+B) el final de la etiqueta </head> y justo antes pegamos este código:
<!--SYNTAX HIGHLIGHTER BEGINS--> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/> <script language='javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script> <!--SYNTAX HIGHLIGHTER ENDS-->
- A continuación hacemos clic en "Guardar plantilla" y ya tenemos integrado 'SyntaxHighlighter' en nuestro blog.
<pre class="brush: js">
// SyntaxHighlighter makes your code snippets beautiful without tiring your servers.
// http://alexgorbatchev.com
var setArray = function(elems) {
this.length = 0;
push.apply(this, elems);
return this;
}
</pre>
La salida debería de ser la siguiente:
%2B13.03.56.png)
Y si tienes una web y no un blog, pues lo añades en la cabecera de tu web ('<head></head>') y ya lo tienes integrado. Y si no quieres usar la versión subida por Alex Gorbatchev o la quieres modificar, pues te lo puedes descargar e incluirla directamente en tu web.
Para usarlo hay varias formas, pero la recomendada es con la etiqueta <pre>. Como en el ejemplo anterior, abres la etiqueta, eliges un "brush" (define el lenguaje: html, javascript, cpp...) con el atributo class, y pegas tu código en el lenguaje que elijas. Los diferentes "brush" que puedes elegir son:
| Languaje | Identificador |
| C++ | cpp, c, c++ |
| C# | c#, c-sharp, csharp |
| CSS | css |
| Delphi | delphi, pascal |
| Java | java |
| Java Script | js, jscript, javascript |
| PHP | php |
| Python | py, python |
| Ruby | rb, ruby, rails, ror |
| Sql | sql |
| VB | vb, vb.net |
| XML/HTML | xml, html, xhtml, xslt |
Si por ejemplo queréis incluir código en C++, pues la etiqueta sería algo como <pre class="brush:cpp">.
Otra cosa son los temas, a mi me gusta el neutro que es el que viene por defecto. Pero seguro que os habéis fijado en el de algunas webs negras con el código resaltado en verde, al estilo de terminales de Matrix. Pues existen varios temas para elegir, y seguro que con poco que conozcáis de CSS podéis modificarlos a vuestro gusto (para eso las licencias GPL/MIT del código). Sólo tenéis que sustituir, el que viene por defecto ('shThemeDefault.css') en la cabecera de la web por alguno de los siguientes o el vuestro propio (podéis cliquear para ver un ejemplo de como quedan):
- shThemeDefault.css
- shThemeDjango.css
- shThemeEclipse.css
- shThemeEmacs.css
- shThemeFadeToGrey.css
- shThemeMidnight.css
- shThemeRDark.css
Sustituid el que elijáis en la siguiente línea:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
Por último, y no menos importante, podéis elegir entre licencia MIT License o GPL , así que tanto si lo usáis en proyectos de código abierto, como en soluciones comerciales de código cerrado, guay.
Toda esta información, viene mejor y más detallada en la web oficial del proyecto SyntaxHighlighter, y esta entrada es sólo un acercamiento al público de habla hispana.
No hay comentarios:
Publicar un comentario