Escribiendo codigo en WordPress.com

Estándar

Desde que comencé a poner tutoriales aqui en wordpress.com me di cuenta que ocurrian un par de cosas extrañas al momento de escribir el código fuente.Las comillas “” no son las comillas que uno veria en el editor de texto normal sino esas comillas que abren y cierran mas comunes de ver en un *procesador* de texto, esas se ven muy bien pero tienen el problema de que si las copia al entorno de desarollo vera un monton de errores y devera de remplazar todas las comillas, ademas que el uso de los caracteres < y > en los xml tiende a causar problemas de renderizado (ya que son caracteres reservados de xml y html) y ademas que no usa uan fuente con espaciado regular, lo que puede hacer que leer el código sea un poco confuso.

2016-02-28

Figura 1 – Errores de comillas.

Y si bien hay formas de prevenir eso (los entornos <pre> y <code>) al final son innecesarios ya que wordpress.com le proporciona de las etiquetas [ code ]  [ /code] las cuales le permiten indicar al wordpress.com que el texto contenido entre esas dos debe de ser considereado codigo fuente, con el resaltado de sintaxis correcto para ese lenguaje, numeración de lineas, poner el titulo de ese código e incluso permitir minimizar el código para que no ocupe demasiado espacio, a continuación veremos como usar esa etiqueta.

La etiqueta [ code]

La sintaxis de la etiqueta code es la siguiente:

[ code language="java" title="HolaMundo.java"]
public class HolaMundo {
   static public void main(String[] args) {
      System.out.println("Hola Mundo!");
   }
}
[/code]

Es bastante intuitivo colocamos nuestro código entre las etiquetas y en la etiqueta que abre indicamos que lenguaje es el código (puede ver que lenguajes estan soportados en el enlace en el area de referencias) y el titulo que ese código tendra en el.

Notara que puse un espacio entre el corchete [ y la palabra code, esto es necesario para poder *mostrar*  esa etiqueta en wordpress.com, recuerde ignorar eso ya que aplique lo mencionado en esta entrada, ya sin ese espaciado el ejemplo anterior se ve de la siguiente manera:

public class HolaMundo {
   static public void main(String[] args) {
      System.out.println("Hola Mundo!");
   }
}

Notara el coloreado de sintaxis adecuado, numeración de lineas y que si copia eso al entorno las comillas se copian correctamente.

Esto tambien es util con los archivos xml de modo que el código

[ code language="xml" title="Ejemplo.xml"]
<xml>
<data> ANDROIDE </data>
</xml>
[/code]

Aparecera como
<xml>
<data> ANDROIDE </data>
</xml>

Esto es muy util para corregir lo antes mencionado con los caracteres < y >

 

Referencias:

Lenguajes soportados: https://en.support.wordpress.com/code/posting-source-code/