Publicación de código fuente con Syntaxhighlighter

Cuando te pones a escribir algún post que contenga código fuente siempre te quedas con la sensación (mas bien cruda realidad) de lo horrendo que queda el código fuente en el texto cuando estamos acostumbrados a ver el coloreado de sintaxis en cualquier editor que usemos.

Nos aparece la necesidad y el impulso de crear una hoja de estilos para que aquello quede más atractivo, pero después de ver el tiempo que has dedicado a poner el post (que nunca sobra) y el gastarás en crear la hoja de estilos (que nunca dejará de crecer) y la tarea de adaptar el código con el uso de la plantilla, rápidamente queda en un segundo plano o tercero …

Para facilitarnos la vida Alex Gorbachev nos ha obsequiado con su librería Syntaxhighlighter que nos ahorrará todo el trabajo y añadirá funcionalidad nueva.

Utilización:

1. Enlazar la hoja de estilos general y la del skin que queramos utilizar.

   <link type="text/css" rel="stylesheet" href="/jromay/styles/shCore.css"/>
   <link type="text/css" rel="stylesheet" href="/jromay/styles/shThemeDefault.css"/>

   Hay varios skin donde elegir:

   • shThemeDefault.css
   • shThemeDjango.css
   • shThemeEmacs.css
   • shThemeFadeToGrey.css
   • shThemeMidnight.css
   • shThemeRDark.css
2. Incluir el script básico y el/los correspondiente/s al lenguaje de programación que queremos formatear.

   <script src="/jromay/scripts/shCore.js" type="text/javascript"></script>
   <script src="/jromay/scripts/shBrushJava.js" type="text/javascript"></script>

   Plantilla	Alias	Archivo
   ActionScript3	as3, actionscript3	shBrushAS3.js
   Bash/shell	bash, shell	shBrushBash.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
   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
   Texto plano	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

3. Modificar la configuración a nuestro gusto y lanzamiento del script.

   <script type="text/javascript">
        SyntaxHighlighter.config.clipboardSwf = '/jromay/scripts/clipboard.swf';
        SyntaxHighlighter.all();
   </script>

   Hay tres objetos principales que configurar:
   SyntaxHighlighter.config (configuración común a todos los bloques)

   Parámetro	Valor	Descripción
   bloggerMode	false	Integración para Blogger.com
   clipboardSwf	null	Localización del archivo clipboard.swf para facilitar las opciones del portapapeles.
   strings	Object	Para cambiar los mensajes.
   stripBrs	false	Para ignorar los tags <br />.
   toolbarItemWidth	16	Ancho de los iconos de la barra de herramientas
   toolbarItemHeight	16	Alto de los iconos de la barra de herramientas
   tagName	"pre"	Tag usado para los bloques de código.

   SyntaxHighlighter.config.strings (definen los valores de los mensajes para su traducción)

   Parámetro	Valor por defecto
   expandSource	"+ expand source"
   viewSource	"view source"
   copyToClipboard	"copy to clipboard"
   copyToClipboardConfirmation	"The code is in your clipboard now"
   print	"print"
   help	"?"
   alert	"SyntaxHighlighternn"
   noBrush	"Can't find brush for: "
   brushNotHtmlScript	"Brush wasn't made for html-script option: "

   SyntaxHighlighter.defaults (valores por defecto de configuración individual de los bloques)

   Parámetro	Valor	Descripción
   auto-links	true	Poniéndolo a falso no se puede hacer click sobre los enlaces del código
   class-name	''	Añade nuevas clases para los elementos
   collapse	false	Permite que el bloque aparezca minimizado por defecto.
   first-line	1	Permite cambiar el nº de la primera línea de código
   font-size	'100%'	Cambia el tamaño de la fuente
   gutter	true	Permite eliminar la numeración de las líneas
   highlight	null	Permite iluminar algunas líneas para resaltarlas. Sintaxis: [1, 2, 3]
   html-script	false	Permite iluminar código html dentro de otras plantillas (php...)
   light	false	Desactiva la barra de herramientas y la numeración
   ruler	false	Numera las columnas
   smart-tabs	true	Permite bloquear las posiciones del tabulador
   tab-size	4	Ajusta el tamaño del tabulador
   toolbar	true	Activa o desactiva la barra de herramientas
   wrap-lines	true	Permite romper las líneas largas en varios renglones

4. incrustar el código entre las etiquetas <pre>  y </pre> sustituyendo las aperturas cierres de los tags < por &lt; y > por &gt;

   <pre class="brush:html">
   &lt;script type="text/javascript"&gt;
        SyntaxHighlighter.config.clipboardSwf = '/jromay/scripts/clipboard.swf';
        SyntaxHighlighter.all();
   &lt;/script&gt;
   </pre>

Entradas relacionadas :

Ofuscación de código Javascript

MONOGRÁFICO GOOGLE: Google Analytics, config...

MONOGRÁFICO GOOGLE: Google Analytics, introd...

Chuletas de Informática "Al Grano"