domingo, 27 de febrero de 2011

Publicando código con Syntax Highlighter 3.0.83

Posterior a varias publicaciones las cuales contenían código ya sea para JSP, HTML, JavaScript, etc. me vi en la necesidad de mostrarlo de cierta manera más ordenada que la utilizada hasta el momento. No había encontrado soporte en blogger para lo que estaba buscando, por lo que recurrí una herramienta externa muy efectiva.

package tutorial;
import com.opensymphony.xwork2.ActionSupport;
public class HolaGente extends ActionSupport {
  private String name;
  public String getName() {
  return name;
  }
  public void setName(String name) {
      this.name = name;
  }
  public String execute() {
      name = "Hello, " + name + "!"; 
      return SUCCESS;
  }
}


Syntax Highlighter como dice su nombre reconoce y destaca la sintaxis de los códigos que publicamos dependiendo del lenguaje que estemos usando. Fue creado por Alex Gorbatchev en el año 2004 y la última versión corresponde a la 2010 siendo la 3.0.83.

Para comenzar solo necesitaran los archivos que pueden encontrar en el siguiente link.

Lo primero que realizaremos es modificar el cuerpo de nuestra página, específicamente el <head>, a si que antes de cerrar el </head> incluiremos las siguientes lineas.

<link href="http://www.dropbox.com/u/10104993/syntaxhighlighter/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://www.dropbox.com/u/10104993/syntaxhighlighter/shCoreRDark.css" rel="stylesheet" type="text/css"></link>
<script src="http://www.dropbox.com/u/10104993/syntaxhighlighter/shCore.js" type="text/javascript">

<script src='http://www.dropbox.com/u/10104993/syntaxhighlighter/shBrushCss.js' type='text/javascript'/>
<script src='http://www.dropbox.com/u/10104993/syntaxhighlighter/shBrushJava.js' type='text/javascript'/>
<script src='http://www.dropbox.com/u/10104993/syntaxhighlighter/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://www.dropbox.com/u/10104993/syntaxhighlighter/shBrushJScript.js' type='text/javascript'/>
<script src='http://www.dropbox.com/u/10104993/syntaxhighlighter/shBrushSql.js' type='text/javascript'/>
<script src='http://www.dropbox.com/u/10104993/syntaxhighlighter/shBrushXml.js' type='text/javascript'/>
<script src='http://www.dropbox.com/u/10104993/syntaxhighlighter/shBrushPhp.js' type='text/javascript'/>

<script type='text/javascript'>
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

Pueden copiar exactamente esas lineas a su web o bajar el archivo que mencioné más arriba y subirlo a su servidor para indicar el path correspondiente a ese servidor, son exactamente los mismos.

Los 4 archivos que están a continuación son obligatorios, aunque el cuarto puede variar, es solo una hoja de estilo, utilizo la shCoreRDark.css porque el fondo de mi Blog es oscuro, pero en la carpeta Styles pueden encontrar muchas más.

shCore.css
shCore.js
shBrushCss.js
shCoreRDark.css

Los otros archivos es el javascript creado para reconocer cada lenguaje, se pueden identificar por el nombre del archivo aunque a continuación presentaré una tabla con los alias que se usan y el lenguaje acorde a él que identifica su sintaxis.

Lenguaje Nombre Alias Nombre Archivo
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
ColdFusion cf, coldfusion shBrushColdFusion.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
Erlang erl, erlang shBrushErlang.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
Plain Text 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

En mi código puse q reconociera 7 lenguajes, ahí uds. suben el archivo javascript que sea necesario a su servidor y lo utilizan llamándolo desde el head de su página.

Con esto ya tienen realizada la instalación y configuración de este complemento. A continuación explicaremos como se utiliza para mostrar códigos.

Primero deben copiar el siguiente codigo a la página.

<pre class="brush:lenguaje">
"codigo"
</pre>

Lo que dice lenguaje lo cambian por el alias del lenguaje utilizado que se mencionó en la tabla anterior y en la parte que dice código copian el trozo de código que quieren mostrar.

Nota: Tienen que tener cuidado con los signos < y >  estos deben ser reemplazados por &lt; y &gt; respectivamente para que no tengan problemas con el código fuente propia de la pagina que están elaborando.

Para mayor información pueden recurrir a la página oficial.