viernes, 13 de febrero de 2009

Cómo usar SyntaxHighlighter 2.0 en Blogger

SyntaxHighlighter: es una librería completa para resaltar código (syntax highlight) desarrollada en JavaScript que permite dar una aspecto visual mucho más agradable a un fragmento de código incrustado en un sitio web, blog, wiki, etc.

Este proyecto iniciado en 2004 a ganado ya mucha aceptación y recientemente, a inicios de este mes (Feb. 2009) a lanzado su nueva versión: SyntaxHighlighter 2.0. De acuerdo al sitio oficial del proyecto la versión 2.0 representa una renovación casi completa (código reescrito, limpieza, optimización, estandarización y nuevas características).

Existe un post (en ingles) sobre como usar dicha librería javascript en blogger, aunque este post data de Agosto de 2007 es una buena referencia, aquellos que lo deseen lo pueden revisar en el siguiente enlace: http://developertips.blogspot.com/2007/08/syntaxhighlighter-on-blogger.html

A continuación los pasos necesarios:
1. Descargamos SyntaxHighlighter aquí y buscamos un buen servidor donde guardar los archivos incluidos en la librería.
2. Ingresamos en BLOGGER, y editamos nuestra plantilla: "Personalizar > Diseño > Edición de HTML", yo de paso aproveché para dar una nueva imagen a mi blog. :-)
Modificamos el header de la plantilla como sigue:
<!--syntaxHishlighter begin-->
<link href="http://[HOST_SITE]/shCore.css" rel="stylesheet" type="text/css">
<link href="http://[HOST_SITE]/shThemeDefault.css" rel="stylesheet" type="text/css">
<script src="http://[HOST_SITE]/shCore.js" type="text/javascript">
<script src="http://[HOST_SITE]/shBrushCpp.js" type="text/javascript">
<script src="http://[HOST_SITE]/shBrushCSharp.js" type="text/javascript">
<script src="http://[HOST_SITE]/shBrushCss.js" type="text/javascript">
<script src="http://[HOST_SITE]/shBrushJava.js" type="text/javascript">
<script src="http://[HOST_SITE]/shBrushJScript.js" type="text/javascript">
<script src="http://[HOST_SITE]/shBrushSql.js" type="text/javascript">
<script src="http://[HOST_SITE]/shBrushXml.js" type="text/javascript">
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.config.ClipboardSwf = "http://[HOST_SITE]/clipboard.swf"; SyntaxHighlighter.all();
</script>
<!--syntaxHishlighter end-->
Aquí es importante resaltar que la configuración SyntaxHighlighter.config.bloggerMode es necesario para que todo funcione correctamente en Blogger.

3. Ahora cada fragmento de código que deseemos resaltar lo colocamos dentro un tag <pre>, por ejemplo:
<pre class="brush: js; html-script: true;  auto-links: false">
alert("hola mundo!");
</pre>
Con esta está ya todo listo.

Saludos.

Actualización: Google Page Creator será reemplazado por Google Site y ya no es una buena opción para guardar los archivos necesarios para usar el SyntaxHighlighter.

Actualización 02/01/2011: Al parecer la opción light:true hacía que no se cargaran los controles para copiar el código de ejemplo por lo que la quité :).

jueves, 12 de febrero de 2009

Code templates en NetBeans

Los Code Templates o Plantillas de código son una característica muy útil para cualquier programador, yo he usado esta funcionalidad en gedit y en NetBeans.
¿Cómo funcionan los Code Templates?

Básicamente escribes una palabra, presionas una tecla que hace las veces de disparador y el editor automáticamente ingresa una o varias líneas de texto que de otro modo habrías tenido que escribir.

Pueden ver esta y otras características de NetBeans aquí.

nota: al escribir este post estoy utilizando NetBeans 6.1

Antes de proseguir debemos definir algo sobre las plantillas:
Los Parámetros: cada plantilla puede contener varios de estos, los cuales constan de un nombre y varios hints (sugerencias) opcionales, ejemplo:

${param_name default="p1"}
Para una lista completa de las opciones consultar aquí.

¿Cómo se usan Code Templates en NetBeans?

  1. Primero hay que conocer las plantillas ya existentes, para ello en NetBeans ingresamos a las opciones, en el menú Tools->Options y escogemos la categoría Editor y la solapa (tab) Code Templates.
    Podemos probar revisar los detalles de las plantillas existentes, eliminarlas y crear otras nuevas.
    Se puede observar que existe una lista con los diferentes
    lenguages para los cuales se podemos crear Plantillas, en mi caso usaré Java.

  2. Vamos a definir dos plantillas nuevas así que presionamos el botón New, se nos muestra un dialogo donde debemos ingresar la abreviatura que será usada para identificar la nueva plantilla, luego hacemos clic en OK, la plantilla es creada y queda seleccionada para que ingresemos el texto expandido por el cual será reemplazada la abreviatura
    en el editor, opcionalmente podemos definir una descripción si lo deseamos (repetiremos estos pasos para crear la segunta plantilla).
    Definiremos las plantillas de la siguiente forma:
    Abreviatura: gpl
    Texto Expandido:


    /*
    * ${programName default="miAplicacion" } ${briefIdea default="Mi gran primera aplicacion"}.
    * Copyright (C) ${year} ${author}
    *
    * This program is free software: you can redistribute it and/or modify
    * it under the terms of the GNU General Public License as published by
    * the Free Software Foundation, either version 3 of the License, or
    * (at your option) any later version.
    *
    * This program is distributed in the hope that it will be useful,
    * but WITHOUT ANY WARRANTY; without even the implied warranty of
    * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
    * GNU General Public License for more details.
    *
    * You should have received a copy of the GNU General Public License
    * along with this program. If not, see <http://www.gnu.org/licenses/>.
    */



    Abrevitura:
    getset
    Text Expandido:



    ${methodType default="String"}get${methodName default="Value"}();
    voidset${methodName}(${methodType} ${paramName default="value"});

  3. Cerramos la ventana de opciones presionando OK.

  4. Debemos tener algún archivo donde aplicar los templates, trabajaremos con una interfaz, no voy a explicar en este post como crear proyectos o archivos en NetBeans pero se puede encontrar más sobre ese tema aquí.

  5. Ya que estemos editando nuestra recién creada interfaz podemos usar las plantillas que acabamos de crear:

    • La primer plantilla permite agregar al archivo actual la licencia gpl, nos desplazamos al inicio del documento y escribimos "gpl" (sin las comillas) e inmediatamente presionamos tab (el disparador para los code templates), el editor reemplazará la palabra gpl por el contenido del Texto Expandido que definimos anteriormente y colocará el cursor en donde hemos colocado el parámetro programName, presionando tab podemos pasar al siguiente parámetro.
      Al llegar al ultimo parámetro, presionado tab se regresa al primero, para terminar la edición presionamos ENTER.

    • La segunda plantilla permite definir un par de métodos para trabajar con un campo siguiendo el estándar en Java (set para establecer y get para obtener), en nuestra plantilla las funciones carecen de código encerrado entre corchetes ({}) porque tiene como objetivo ser usada en una interfaz, si deseamos adaptar esta plantilla para usarla en una clase normal se deben agregar los corchetes, dejaré esto al lector a modo de ejercicio.
      Lo interesante de esta plantilla es que los parámetro methodType y methodName aparecen en más de una ocasión y al editarlo en el lugar donde aparecen primero su valor será cambiado en todos los lugares donde se encuentre en la plantilla de esa forma lo escribimos una única vez.
      Es importante señalar, también, que incluso se puede escribir algo dentro de la función por ejemplo definiendo el código por defecto para el método get:

      return this.${methodName};

Con esto concluimos, cada quien puede crear las plantillas que mejor se adapten a su estilo y necesidades, como ya he mostrados se puede reducir el tiempo de escribir una gran cantidad de
líneas de código a una simple abreviatura y cambiar unos cuantos parámetros.

Saludos.