Posiblemente habrá otros resaltadores de sintaxis mejores (si los conocéis dejadme un comentario), pero yo he preferido no perder mucho tiempo e instalar en este blog el que ya conocía.
Podéis descargaros la versión 1.5.1 (me da la impresión de que el proyecto ya debe estar parado) de su página de Google Code. Tal y como aparece su tutorial (la sección ‘Usage‘) no os va a funcionar, por lo que explico los pasos:
- Descargamos y descomprimimos el archivo .rar en nuestro servidor, en la misma carpeta del theme que estamos utilizando.
- Los scripts sin comprimir no los vamos a necesitar, por lo que podemos deshacernos de la carpeta Uncompressed.
- Renombramos la carpeta Scripts como js, y Styles como css, para así utilizar los mismos nombres que en la mayor parte de documentación y manuales que podréis encontrar en otros blogs. También sacamos Scripts/clipboard.swf al nuevo directorio flash (flash/clipboard.swf), y renombramos la carpeta general de dp.SyntaxHighlighter a syntaxhighlighter.
- Por último editamos el header.php de nuestro theme y añadimos las siguientes líneas dentro de la etiqueta <head>:
<!-- Syntax Highlighter --> <link type="text/css" rel="stylesheet" href="<?php bloginfo('template_directory');?>/syntaxhighlighter/css/SyntaxHighlighter.css"></link> <script language="javascript" src="<?php bloginfo('template_directory');?>/syntaxhighlighter/js/shCore.js"></script> <script language="javascript" src="<?php bloginfo('template_directory');?>/syntaxhighlighter/js/shBrushCpp.js"></script> <script language="javascript" src="<?php bloginfo('template_directory');?>/syntaxhighlighter/js/shBrushCSharp.js"></script> <script language="javascript" src="<?php bloginfo('template_directory');?>/syntaxhighlighter/js/shBrushCss.js"></script> <script language="javascript" src="<?php bloginfo('template_directory');?>/syntaxhighlighter/js/shBrushPhp.js"></script> <script language="javascript" src="<?php bloginfo('template_directory');?>/syntaxhighlighter/js/shBrushXml.js"></script> <script type="text/javascript" language="javascript"> window.onload = function () { dp.SyntaxHighlighter.ClipboardSwf = 'flash/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); } </script> <!-- Fin de Syntax Highlighter -->
A partir de aquí, ya podemos utilizar el resaltado de sintaxis en nuestros posts, introduciendo el código dentro de las etiquetas <pre name=”code” class=”lenguaje”> codigo codigo codigo </pre>.
Los lenguajes disponibles son muchos (hay que cambiar ‘lenguaje‘ por el que estéis usando, claro está), y necesitaréis incluir en el header aquellos que vayáis a usar. En el ejemplo que os he puesto yo he añadido C++, C#, Css, Php y Xml, pero hay unos cuantos más disponibles en el directorio js. Dejad únicamente aquellos que sean susceptibles de ser usados, puesto que cada visita tiene que descargárselos y el ahorro de ancho de banda siempre es bueno.
Podéis encontrar otro manual para el gestor de contendos dasBlog en picacodigos.com, donde también podréis encontrar esta lista de alias para los lenguajes que pueden usarse:
Lenguaje: Alias
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
Hola, Excelente pero no me muestra el fondo en renglones.