En muchas de nuestras publicaciones al Blog necesitamos mostrar un código o parte de este, para explicar como resolvimos un determinado problema, o simplemente explicar que hace alguno de nuestros códigos.
Y bien sabemos que en ocasiones es incomodo ver Blogs donde el código no se puede apreciar bien, o al aparecer como texto llano, no es fácil reconocer que es lo que se supone que debería de hacer cierto código de programa.
Una de la forma en que podemos mostrar código a los lectores del Blog es agregando el color al código tal y como, por ejemplo, Emacs lo haría en un cierto lenguaje, esto podría ser cambiando de color a cada función, pero esto es un proceso tardado y tedioso cuando ya hablamos de un código extenso, así que no es el mejor camino.
Afortunadamente ya existe una forma de colocar código en nuestro Blog con la sintaxis adecuada y colocando colores según sean variables, funciones, comentarios, etcetera. Esta forma es agregando unos Java Script, que harán estos cambios en nuestro código agregado al Blog.
Estos archivos las obtendremos de SyntaxHighlighter, que es un proyecto de Alex Gorbatchev, especialmente pensado para los que ocupamos poner código en nuestras páginas web. Es gratuito y fácil de usar.
SyntaxHighlighter nos permite colorear nuestros códigos para diferentes lenguajes, entre los que se encuentran: Bash, C#, C++, CSS, Erlang, JScript, Java, Perl, PHP, Python, SQL, XML, HTML, entre otros.
Agregar SyntaxHighlighter al Blog
Paso 1
Primero debemos modificar nuestra plantilla del Blog. Para esto nos dirigimos a la esquina superior derecha de nuestro Blog, y entramos a
Diseño.
Paso 2
Una vez ahí, nos dirigimos a la
Edición de HTML, que es nuestra plantilla del Blog.
Paso 3
En la sección que dice
Editar Plantilla es donde vamos a agregar unas lineas nuevas.
En mi caso ya tengo agregadas las necesarias para ciertos lenguajes.
Las lineas que agregaremos son de un archivo CSS y otros Java Script, uno por cada lenguaje del que deseemos poner código en nuestro blog.
<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"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"/>
<script language="javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
Estas lineas de código son necesarias agregar. Se deben colocar antes de la etiqueta
<head>. Las lineas que coloqué anteriormente son las que tengo actualmente en mi Blog, son para colocar código de Java, Python y Xml.
La página de edición de nuestra plantilla quedaría así:
Nota: No olvides dar clic en Guardar Plantilla.
Paso 4
Una vez agregadas correctamente las lineas para añadir los archivos CSS y Java Script necesarios para colorear nuestro código, es tiempo de editar una de nuestras entradas con algún código o crear una entrada nueva para probar si nos funciona.
De ahora en adelante cuando hagamos una entrada que incluya código haremos lo siguiente:
Debemos entrar a la sección de
Edición de HTML de una
Nueva entrada. Es aquí donde nos permiten agregar etiquetas html para darle un formato diferente a nuestras entradas.
Nuestro código estará siempre entre las etiquetas
<pre> ...
</pre>.
Ahora un ejemplo de como debería de colocarse el código para Python:
<pre class="brush:python">
#!/usr/bin/python
print "Hola Mundo!"
n = 2010
print n
# Comentarios
</pre>
Y en tu Blog se vería tal y como se muestra enseguida:
#!/usr/bin/python
print "Hola Mundo!"
n = 2010
print n
# Comentarios
Más lenguajes
En mi caso personal solo tengo por el momento los Java Script para tres lenguajes, pero como les decía al inicio existen para varios lenguajes más. Aquí les pongo una tabla con los otros lenguajes que pueden agregar.
| Lenguaje | Brush: | 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 | shBrushXml.js |
El enlace que tiene cada lenguaje te lleva a la página de SyntaxHighlighter, donde te muestra un código ejemplo para que observes que tal se vería tu código.
Creo que esto dará mayor presentación a un código en tu Blog, espero que esta entrada haya sido de gran ayuda, y que logren poner código presentable.
Sugerencia:
Debido a que las lineas que agregamos a nuestra plantilla hacen un llamado a esos archivos ubicados en el servidor de SyntaxHighlighter, y se encuentran ubicados al inicio de la plantilla, no les recomiendo agregar lenguajes que no usen, porque estos se tienen que descargar al tiempo que se cargue su Blog, por lo tanto si agregamos muchos lenguajes, nuestros visitantes tal vez tengan que esperar segundos de más a que cargue la página debido a esto. Así que yo creo que cargando no más de 8 lenguajes las cosas andarán de maravilla.
Enlaces:
SyntaxHighlighter
