Mi escritorio: 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 < y > 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.

Mi escritorio

domingo, 27 de febrero de 2011

Publicando código con Syntax Highlighter 3.0.83

1 comentario: