domingo, 24 de junio de 2012

Cómo formatear el codigo fuente que posteas en tu blog con SyntaxHighlighter

Muchas veces que has querido compartir código fuente o una porcion de el en tu blog o en tu sitio posiblemente no hayas podido darle el formato de con sus respectivas indentaciones, resaltado de funciones,texto o definiciones y todo el formato con el que lo ves en tu entorno de desarrollo.

Con SyntaxHighlighter de Alex Gorbatchev puedes darle ese formato que deseas a tu código sea cual sea el lenguaje en el que lo tengas solo debes incluir en tu plantilla los archivos .js usando la siguiente sintaxis justo despues de la etiqueta head de tu plantilla.




















Es indispensable que siempre incluyas shCore.js, shCore.css y las funciones que se detallan en el post a continuacion, luego dependiendo los lenguajes que quieras formatear en tu sitio deberas agregar los pinceles que detalla la tabla al final del post.
Claro que si quieres agregar todos los lenguajes disponibles basta con que copies y pegues el codigo anterior justo despues de la etiqueta head de tu plantilla.



Ahora que tienes agregadas las librerias en tu plantilla procederemos a formatear el código que queremos postear, para eso debemos editar la entrada a publicar como HTML y poner el código entre etiquetas pre . Para elegir el formato según el lenguaje (ya que depende la sintaxis) le agregamos a la etiqueta pre el atributo class="brush :xxx" donde en xxx deberas escribir el "Brush aliases" que encontraras en la tabla al final del post.  Por ejemplo para resaltar el código PHP debemos escribirlo asi en la edicion HTML de la entrada:
 
 echo "Hola Mundo"; 
Y como se vera en tu post sera asi:
 echo "Hola Mundo" 
  Pero si prefieres tener alojados los scripts en tu hosting para evitar la dependencia del repositorio original descarga los archivos .js que encontraras en este link. Entre los lenguajes soportados estan:
Brush nameBrush aliasesFile name
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js


Encontraras mas información y ejemplos de los lenguajes en el sitio oficial: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

1 comentario: