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.
1 comentario:
Muy buen aporte justo lo q buscaba
Publicar un comentario