Me he dado cuenta de que a la hora de publicar algún post que contenga código HTML, CSS o JavaScript, resulta muy difícil de interpretar al estar
entrecomillado.
Me he propuesto cambiar este estilo y dejarlo en algo mas decente y mas realista, algo que
destaque las etiquetas y las propiedades como si de un editor se tratase. Pues después de bastante tiempo buscando he encontrado el siguiente script llamado
SyntaxHighlighter, he conseguido implementarlo y los resultado son mas que satisfactorios. Aun así me gustaría conocer vuestra opinión sobre cual método os parece mejor si este o el anterior. Creo que no habrá duda.
Por otra parte quería compartir mi experiencia con este script por lo que a continuación explico las características que tiene y como podéis usarlo en vuestros blogs.
Las librerías
SyntaxHighlighter soporta los siguientes lenguajes de programación resaltandolos como si de un editor se tratase:
- C++: cpp, c, c++
- C#: c#, c-sharp, csharp
- CSS: css
- Delphi: delphi, pascal
- Java: java
- JavaScript: js, jscript, javascript
- PHP: php
- Python: py, python
- Ruby: rb, ruby, rails, ror
- SQL: sql
- VB: vb, vb.net
- XML/HTML: xml, html, xhtml, xslt
Los seudónimos anteriores como podéis apreciar se usaran a la hora de indicarle que tipo de lenguaje vamos a mostrar, ya veremos mas adelanta donde debemos indicarlo.
Lo primero que debéis hacer es bajaros el paquete con todos los archivos que se necesitan, lo podréis hacer desde la
pagina oficial, o desde este
enlace directo. Lo siguiente sera alojar los archivos esenciales en algún servidor que serian
SyntaxHighlighter.css,
shCore.js y
clipboard.swf. Los demás archivos son los llamados "brushes" y sirven para preformatear los distintos lenguajes soportados. Solo son necesarios los que vayáis a usar, en mi caso solo he implementado
shBrushCss.js para el código CSS,
shBrushJava.js y
shBrushJScript.js para el código Java y JavaScript respectivamente y
shBrushXml.js para el HTML. Los demás, por ejemplo como,
shBrushCpp.js se usa para C++,
shBrushDelphi.js para Delphy,
shBrushPhp.js para PHP,
shBrushPython.js para Ruby,
shBrushSql.js para SQL,
shBrushVb.js para VisualBasic y por ultimo
shBrushCSharp.js para C#. Te recuerdo que en la anterior lista podréis ver todos los lenguajes y su abreviatura para utilizarlos en el blog.
Una vez alojados los archivos nos dirigimos al panel de control de nuestro blog y en la pestaña
Diseño nos vamos a la sección
Edición de HTML, y sin necesidad de expandir los artilugios nos situamos después de la etiqueta <head>, no es necesario que sea inmediatamente después sino entre estas etiquetas. Recomiendo que sea al principio o al final. Y ahí, pegamos lo siguiente:
Haced una copia de seguridad antes de realizar ningún cambio, nunca se sabe lo que puede pasar.<link href="(DIRECCIÓN DONDE SE ENCUENTRE ALOJADO SyntaxHighlighter.css)" rel="stylesheet" type="text/css">
<script src="(DIRECCIÓN DONDE SE ENCUENTRE ALOJADO shCore.js)" type="text/javascript">
<!-- carga los brushes -->
<script src="(DIRECCIÓN DONDE SE ENCUENTRE ALOJADO LOS DISTINTOS BRUSHES, REPETIR TODA LA LINEA SI SE INCLUYE MAS DE UNO)" type="text/javascript">
<script language="javascript">
window.onload = function ()
{
/* permite copiar al portapapeles*/
dp.SyntaxHighlighter.ClipboardSwf = "(DIRECCIÓN DONDE SE ENCUENTRE ALOJADO <br />clipboard.swf)";
/* activa el modo blogger*/
dp.SyntaxHighlighter.BloggerMode();
/* activa Highlight */
dp.SyntaxHighlighter.HighlightAll('code');
}</script>
Guardar los cambios y ya esta todo listo, lo único que nos queda es ponerlo en practica de la siguiente manera en vuestros posts.
<pre name="code" class="(AQUÍ DEBERÉIS INDICAR EL SEUDÓNIMO DEL LENGUAJE QUE IRÉIS A MOSTRAR "Ver lista anterior")">
Código a mostrar....
</pre>
Con esto es todo, si tenéis algún problema no dudéis en comentarlo, nosotros estaremos encantados en ayudarles. A partir de ahora iremos modificando poco a poco los post antiguos para implementar este nuevo método de visualización. Aunque queremos saber que os parece el nuevo cambio.
También esta web que nos proporciona este servicio dispone de 
