Esta herramienta, basada en JavaScript, para mostrar código fuente correctamente resaltado, tal como si lo estuviésemos viendo en un IDE, me ha parecido de lo más útil para todos aquellos que tengáis un blog de programación o, simplemente, que queráis añadir entradas con código en alguna ocasión.
SyntaxHighlighter funciona con varios lenguajes de programación, como Java, PHP, Ruby, etc, etc, etc. En este enlace se pueden ver todos los "brushes" (ficheros que definen cómo se debe resaltar el código, en función del lenguaje): http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
A continuación va un pequeño tutorial sobre cómo utilizar SyntaxHighlighter en Blogger:
1.- Ir a la pestaña de "Diseño" de vuestro blog.
2.- Hacer clic sobre "Edición de HTML".
3.- Dentro de la cabecera, es decir, entre las etiquetas <head> y </head> añadir lo siguiente:
<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'/>
<!-- A CONTINUACIÓN, LOS "BRUSHES" -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.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/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
Con esto "instalamos" SyntaxHighlighter en el blog y también se añaden los diferentes "brushes", según los lenguajes de programación que se van a utilizar en el blog (se pueden añadir posteriormente si vamos a poner algo en otro lenguaje). En mi caso he puesto para Java, JavaScript y HTML.
5.- Al editar entradas...
- Debemos ir a "Edición de HTML".
- Allí añadimos las etiquetas:
<pre class="brush: java">
<!-- AQUÍ VA EL CÓDIGO -->
</pre>
- Y entre las etiquetas copiamos el código que queremos mostrar.
- Cambiaremos "brush: java", según el lenguaje que vayamos a utilizar. Por ejemplo, parte del texto de esta entrada (con "brush: xml"):
NOTA:
Durante el tiempo que llevo utilizando SyntaxHighlighter, me ha dado algunos problemas, a veces, con los bucles (for y while) en Java, pero de resto todo ha ido genial y da un aspecto más claro y legible al blog.
Para resolver estos problemas con bucles, lo que he hecho ha sido borrar en "Edición de HTML" el código que modificaba el SyntaxHighlighter y después, en "Redactar" volver a copiar el código que falta (es decir, a partir del bucle).
Espero que se entienda, si no, para eso estoy aquí :)
Hola tengo un problema al publicar codigo java en mi blog usando Syntax, en un codigo especifico se pierde el formato y se desordena todo al momento de publicar.
ResponderEliminarCuando escribo mi entrada en html, escribo este codigo entre las etiquetas del syntax:
//Archivo: OArreglos.java
public class OArreglos{
public static void main(String args[]){
//CREACION DEL ARREGLO
int numeros[] = new int[5];
//INSERTAR DATOS AL ARREGLO
numeros[0]=10;
numeros[1]=20;
numeros[2]=30;
numeros[3]=40;
numeros[4]=50;
//IMPRIMIR ELEMENTOS DEL ARREGLO
System.out.println("Indice\tValor");
for(int contador=0; contador<numeros.length; contador++)
System.out.println(contador+"\t"+numeros[contador]);
//SUMAR ELEMENTOS DEL ARREGLO
System.out.println();
int suma;
suma=numeros[0]+numeros[1]+numeros[2]+numeros[3]+numeros[4];
System.out.println("La suma del arreglo es: "+suma);
}
}
y al momento de publicarlo se desordena y queda asi como esta en mi blog:
http://esteesunblogmasdepruebas.blogspot.com/
al parecer, por lo que he observado creo que el problema se genera en esta linea:
for(int contador=0; contador<numeros.length; contador++)
y en especial en la instruccion: numeros.length
te agradeceria tu ayuda cuanto antes, saludos!
Al momento de pulsar el boton de "publicar" me bota el siguiente mensaje:
ResponderEliminar"Su HTML no es aceptable: La etiqueta no es correcta. : NUMEROS.LENGTH; Omitir advertencia"
y le doy clic en omitir advertencia, ¿que hago?