Afortunadamente existe para ello un java script llamado SyntaxHighlighter, que es un proyecto de Alex Gorbatchev que nos permite colorear nuestros códigos para diferentes lenguajes.
| Lenguaje | Brush aliases | Nombre del 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 |
Para mas información visita http://alexgorbatchev.com/SyntaxHighlighter/
Agregando SyntaxHighlighter al Blog
Paso 1
Accedemos al código de nuestra plantilla, para ello entra en la sección "Plantilla" de tu blog, y luego pulsas el boton "Editar HTML"
Paso 2
Copiamos el siguiente código justamente después de la etiqueta "<head>".
<link href='http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCpp.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
Este código sirve para mostrar código en C++.
Paso 3
Cuando se quiera mostrar un código en el blog se pone lo siguiente:
<pre class="brush: tipo codigo">** Codigo de programacion ** </pre>
En el siguiente ejemplo se muestra un código en C++ y para ello se indica mediante el comando <pre class="brush: cpp">, y quedaría de la siguiente forma:
#include "iostream.h"
main()
{
cout << "Hello World!";
return 0;
}
0 comentarios:
Publicar un comentario