Ahora publicar lineas de codigo de nuestro lenguaje de programacion preferido en nuestro blog es mas sencillo gracias al
SyntaxHighlighter. Esta nueva entrada que deseo "compartir" es sobre la configuracion del SyntaxHighlighter ("Resaltador de sintaxis de código"), una herramienta sencilla de usar y que esta desarrollado en Javascript.
El uso de esta herramienta tiene que ver con la facilidad de mostrar nuestro codigo fuente de diferentes lenguajes como si fuera visto en nuestro
IDE preferido (Eclipse, Netbeans, SpringToolSuite, Dreamweaver, PhpEditor, JDeveloper, Rational Application Developer, MyEclipse, FlexBuilder, etc).
En este enlace estan especificados los
lenguajes de programacion disponibles a que pueden ser usados con esta herramienta.
Bien, ahora hay que seguir ciertos pasos tener configurado esta herramienta en nuestro "blogger".
- Ingresa a este link
SyntaxHighlighter.css, selecciona todo el contenido (CTRL + A) de la hoja de estilos y copiar.
- En tu "blogger" ingresa a la seccion Diseño - Edicion de HTML y podrás ver la plantilla actual de tu blog.
- Ahora ubica la linea <b:skin> y pegar la informacion copiada del archivo css justo antes de la linea </b:skin>.
- Seguidamente copiar el siguiente contenido y pegarla en la antes de terminar la seccion </b:head>.
<!-- lenguajes frecuentemente usados por mi -->
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>
-Ahora copiamos las siguientes lineas para la configuracion de SyntaxHighligther, y pegarlas justo antes de terminar la seccion </b:body>.
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
Bien, ya tenemos nuestro "blogger" configurado para usar este herramienta. Ahora podemos crear una "Nueva entrada" y hacer las pruebas necesarias con algunos de los lenguajes.
La sintaxis mas sencilla del SyntaxHighlighter es la siguiente y para cambiar de un lenguaje a otro solo tenemos que cambiar el nombre del class. Ejm: class="php" a class="java".
<pre name="code" class="php">
...Aqui escribir el codigo del lenguaje deseado ..
</pre>
Aqui una muestras de fragmentos de codigos sencillos utilizando esta herramienta:
* Muestra con "
java"
//Prueba Bienvenido
public static void main(){
String miBlog= "blogdedimco.blogspot.com";
int a=0;
System.out.println("Bienvenido al "+miBlog);
}
- Muestra con "
sql"
--Pruebita con sql
select * from usuario;
--bienvenido al blogdedimco.blogspot.com
create table usuario (codigo int(99), username varchar2(25), email varchar2(30));
insert into usuario values(1,'dmclemente','dieg209@gmail.com');
}
- Muestra con "
html"
<html>
<head>
<title>Ejemplito usando html </title>
</head>
<body>
<h1>Bienvenido al blogdeDimco.blogspot.com</h1>
<a href="http://twitter.com/dmclemente"> Follow me on twitter</a>
</body>
</html>
- Muestra con "
javascript"
<script languaje="javascript">
//Prueba alertita
function saludar(){
alert('Bienvenido al blogdeDimco.blogspot.com');
}
</script>
* Para no tener problemas con los codigos html, pueden ayudarse con la herramienta Quick Escape, la cual convierte Raw HTML a Escaped HTML. Es decir si ya tienen su codigo sea html, javascript, PHP, SQL, java, etc, solo copienlo dentro del formulario del siguiente link y click en el boton
Convert to Escape characteres. Aqui el link
Quick-escape.
Espero haya sido util.
Tu amigo
DIMCO.
![[el Blog de DIMCO] - @dmclemente](http://4.bp.blogspot.com/-Cy7tEDkahZ4/TfbwoP7LNiI/AAAAAAAAAJ0/7cipJLx9FVM/s1600/milogo.jpg)
