Páginas

domingo, 23 de enero de 2011

Colocar código en Blogger con SyntaxHighlighter

Si deseas colocar código fuente de algún lenguaje de programación en tu blog de Blogger y que este se vea llamativo, con formato, resaltado con colores y mas, para ello nos ayudara SyntaxHighlighter que es un resaltador de código desarrollado en JavaScript y es código libre, es uno de los mejores resaltadores, en su página oficial se lo encuentra para descargarlo y adicionarlo a tu web pero que pasa si queremos incorporarlo en nuestro blog de Blogger? pues lo que haremos es lo siguiente:

SyntaxHighlighter tiene una versión online para usarla, como en Blogger no se pueden subir archivos, utilizaremos la versión online.

Primero ingresamos al diseño de nuestro blog en Blogger, nos vamos a la pestaña de “Edición de HTML”, esto nos mostrara el código HTML de nuestro blog y buscamos la etiqueta “HEAD” dentro de ahí copiamos el siguiente código:
<!--SYNTAX HIGHLIGHTER INICIO-->
<link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css"/>
<link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"/>
<script language="javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = "http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf";
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER FIN-->

Debemos de ingresar todas las sintaxis de código que utilizaremos, podemos borrar algunas líneas  de la 5 a la 13 o adicionar aquí mismo los lenguajes que utilizaremos, a continuación vemos todos los lenguajes que soporta SyntaxHighlighter:

LenguajeCon que nombres se deben utilizar Que archivo se bebe incorporar
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

Por ejemplo si queremos publicar código Visual Basic según la columna 3 de la tabla deberemos de adicionar la siguiente línea:

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript"></script>
Para usar la sintaxis deberemos de encerar todo el código que queremos publicar con las etiquetas “pre” por ejemplo si queremos insertar código java la llamaríamos como nos dice en la columna 2 de la tabla, seria de la siguiente manera:
<pre class="brush: java">
public class Main {

    public static void main(String[] a3d) {
        System.out.println("SoloInformaticaYAlgoMas.blogspot.com");
    }
}
</pre>
Nota. Si queremos publicar código xml, xhtml, xslt, html y xhtml debemos considerar que dentro de las etiquetas pre no debemos utilizar los caracteres < ni > en vez de ello utilizaremos &lt; y &gt; respectivamente, todo esto para no confundir al código html.

9 comentarios:

  1. Tomen en cuenta que Blogger tiene varios errores al momento de interpretar código HTML, es por eso que si aplican esto posiblemente se les aparezcan espacios demás para ello se entran al código HTML y eliminan los saltos de linea.

    ResponderEliminar
  2. Ahhh también para publicar tablas en existen errores, si quieres eliminar los espacios blancos que existen antes de una tabla, lo mismo eliminar los saltos de linea y del código HTML, esta es la solución a mucho de los errores de Blogger.

    ResponderEliminar
  3. Hay algo que también debemos tomar en cuenta, cuando se carga nuestro blog el utilizar CSS externo ralentiza la carga del blog en un porcentaje menor, pero lo realentiza.

    ResponderEliminar
  4. gracias...me servira mucho para publicar el codigo que queria soy nuevo en esto del blog asi que se te agradece....

    ResponderEliminar
  5. Daniel, muchas gracias, me sirvió mucho para mis publicaciones en mi Blog www.luisfernandoortizvera.com
    Un Saludo desde Colombia.

    ResponderEliminar
  6. Gracias por darte una pasadita Luis, estuve viendo tu blog muy interasante, haber si algun dia intercambiamos conocimientos.

    ResponderEliminar
  7. Muchas gracias, no vieras lo que tuve que hacer. Primero lo metí a la plantilla negra que tenía el blog, pero no salía y era porque lo probaba en Vista Previa. Después que pude se me dio por cambiar la plantilla a una gris y se borro :(

    Ah y después pensé que no usaría todo esos lenguajes, y borré la primera línea

    src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"/>

    y no me cargaba :P

    Ahora si.

    ResponderEliminar

Deja tu comentario, agradecimiento, sugerencia o critica.