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
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">Guardar los cambios y ya esta todo listo, lo único que nos queda es ponerlo en practica de la siguiente manera en vuestros posts.
<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>
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.
<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>
2 Comentarios:
Que mejor que emular un editor, una gran mejora, enhorabuena ;)
Gracias Jose :D, a ver si tiene buena aceptación, que yo creo que si, simplifica bastante la verdad y mejora la legibilidad del código.
Saludos¡
Publicar un comentario