Vamos a programar #21 - Formateando código para HTML.

Hola de nuevo a todos. El día de hoy traigo una aplicación muy corta. Cómo todos sabrán, la mayor parte de este blog trata sobre cosas de programación, por lo que es muy común que publique código fuente en variedad de lenguajes.
Pero al momento de publicar algo, surge un pequeño problema, al copiar el código del editor al blog, este pierde todo el formato. Actualmente uso unos scripts que permiten darle color a la sintaxis, pero cosas como la indentación, se pierden. En lo personal, siempre me gusta ver código que este visiblemente bien, es decir; que se distinga en "donde estás". Un indicador muy claro, es la sangría. Si vez que todo está a la misma distancia, resulta fácil ver que todo es parte de un "if" o parte de un "while".
Para solucionar todo esto y poder formatear el código de una forma más rapida, decidí hacer una aplicación que se encargue del trabajo sucio.

La aplicación es realmente simple, de hecho solo son 10 lineas de código, es una versión beta, y lo único que hace es convertir todos los caracteres que no están admitidos en el html (como "< o >" ).
Dentro las funciones que nos proporciona el api de .NET existe a siguiente función:

RtBResultCode.Text = WebUtility.HtmlEncode(RTBInputCode.Text);

Está función se encuentra en el espacio System.Net; y hace exactamente lo que queremos, formatear todo el código para que lo podamos usar en el lenguaje HTML. Pero bueno si solo quisiera hacer eso no sería una solución a la indentación, de hecho si revisamos el siguiente código (que viene de este blog)
<resources>
<string name="app_name">Calculador de resistencias</string>
 <string-array name="Colores1">
 <item>Negro</item>
 <item>cafe</item>
 <item>Rojo</item>
 <item>Naranja</item>
 <item>Amarillo</item>
 <item>Verde</item>
 <item>Azul</item>
 <item>Violeta</item>
 <item>Gris</item>
 <item>Blanco</item>
 </string-array>
 <string-array name="Colores2">
 <item>Dorado</item>
 <item>Plata</item>
 </string-array>
</resources>


Pero eso no es lo que quiero, si nos damos cuenta todas las tabulaciones han sido reemplazadas por espacios que visualmente son más pequeños.
En cambio cuan usamos el código producido por el programa; lucirá de la siguiente forma:

<resources>
<string name="app_name">Calculador de resistencias</string>
 <string-array name="Colores1">
  <item>Negro</item>
  <item>cafe</item>
  <item>Rojo</item>
  <item>Naranja</item>
  <item>Amarillo</item>
  <item>Verde</item>
  <item>Azul</item>
  <item>Violeta</item>
  <item>Gris</item>
  <item>Blanco</item>
 </string-array>
 <string-array name="Colores2">
  <item>Dorado</item>
  <item>Plata</item>
 </string-array>
</resources>

Por ahora el código solo hace eso, pero si por ejemplo el código tiene espacios en blanco, no obtendremos un resultado diferente al del primer caso.

En la siguiente versión vamos implementar funciones que se encarguen de hacer todo de forma automatica. Si lo que quieres es publicar código, lo ,mejor es que luzca, que al momento de echar un vistazo rápido, puedas ver que al menos está bien estructurado.
 Además lo dejo así porque ando un poco corto de tiempo, pero espero ya no estarlo para la próxima semana. Como siempre, el programa lo puedes bajar de dropbox, en cuanto lo actualice haré el siguiente Post.

Por ahora es todo. Los leo luego.

Preferiré un millón de veces el "Tú por Tú" que la interacción virtual.

Compartir

Publicaciones relacionadas.

Siguiente
« Prev Post
Anterior
Next Post »