Coloca código de programación con SyntaxHighlighter en tu BLog

Tweet

Si eres Blogero y compartes codigo de algun lenguaje de programación como lo hacemos en SorceSharp.blogspot.com estas en el sitio correcto. Ademas de que se vera llamativo, con formato, resaltado con colores y algunos temas disponibles.

SyntaxHighlighter es un resaltador de código libre desarrollado en JavaScript, en la pagina oficial se encuentra para descargarlo, pero el que utilizaremos es su versión online.

[1]: Ingresamos al diseño del Blog, vamos a la pestaña de 'Edición de HTMl', a continuación nos mostrara el código HTMl de la plantilla, ahora buscamos la etiqueta 'HEAD' y dentro de esta etiqueta colocamos el siguiente codigo:

[2]: Ahora buscamos la etiqueta "body" y dentro de esta etiqueta colócalos el siguiente código:

Con este código ya podremos colocar nuestro código preferido, pero falta algo para que identifique de que lenguaje estamos escribiendo.

[3]: En la entrada en la que estés escribiendo actualmente vas a la edición HTML y debajo de todo el texto que hayas puesto o entre párrafos colocas el siguiente código:

"código que desean colocar"

[4]: 'js' lo podemos cambiar por (html, css, csharp, php, etc) ya dependerá de que lenguaje estés utilizando. Lo que el código anterior hace es resaltar todo lo que tengas dentro de esa etiqueta.

Recordemos que este código debe ir en la edición HTMl de la entrada ya que si lo colocamos en el modo normal nos marcara errores. 
Ahora a qui les pongo todas las brush que podemos utilizar, (recordando que "brush" en lenguaje con el que estamos trabajando.) 

Lenguaje	Brush alias	Nombre del Archivo
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

Por ejemplo si vamos escribir en C# identificamos el lenguaje y el Brush Alias y el archivo que debemos utilizar, pero nosotros si lo tenemos agregado. Entonces lo único que necesitamos es el Alias, vamos a donde escribiremos código en C# y ponemos:

//también se puede poner c-sharp 
Console.WriteLine("Hola Mundo en C#");
//Entonce retomando en "brush: XXX" --> en XXX ponemos el alias del
//lenguaje de programación que utilizamos.
 

Bueno amigos eso es todo por hoy, espero que les guste y les aya servido, esta información la obtuve de: 

http://soloinformaticayalgomas.blogspot.com/2011/01/colocar-codigo-en-blogger-con.html y http://sixtudio.blogspot.com/2011/03/anadir-syntaxhighlighter-blogger.html solo que con ninguno de los dos tutoriales pude colocar el código, hasta que fusione la información de las dos paginas y el resultado fue lo de arriba :)

Posted in: Código,SyntaxHighlighter,Tutorial