CÓDIGOS DE COLORES PARA LENGUAJES DE PROGRAMACIÓN EN NUESTRO BLOG.
Cuando hacemos una publicación sobre cualquier ejercicio para un determinado lenguaje de programación, sabemos que la visualización se vea como si estuviera el lenguaje de programación en la pagina del Blog y no se vea de una manera plana y sin sentido.
Además de mejorar la visualización también mejora el entendimiento del usuario, pues por medio de los colores se da cuenta acerca de como es la sintaxis del programa. Por ejemplo cuales son las variables propias del programa y cuales son las variables creadas por el programador.
No crean que poder acceder a los colores correspondientes a un lenguaje de programación es algo difícil, es todo lo contrario, pues para eso utilizaremos el proyecto de
Alex Gorbatchev, del cual obtendremos los archivos de SyntaxHighlighter.
Vamos con los pasos:
1 Paso: Vamos al diseño del blog como se muestra en la imagen:
2 Paso: Luego vamos a la plantilla y luego apretamos el botón de Editar HTML.
3. Paso: Nos aparecera esta ventana, iremos a Editar plantilla y dentro de la cabecera, es decir de la etiqueta <head>, pero al final, ira el código que vemos en la imagen.
Como vemos en mi caso ya tengo agregado los códigos java Script:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/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/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/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>
Los códigos a agregar depende de que lenguajes de programación manejaras para tu Blog, ten en cuenta que solo debes agregar los lenguajes que utilices, no agregues de más por que a la hora de cargar la página por cualquiera de tus usuarios, está se demorará. Así que agrega solo las que necesites.
Luego de pegar el código, le das clic en Guardar plantilla.
4 Paso: Un paso antes para terminar debes saber para que lenguajes tienes acceso:
| Lenguaje | Brush: | 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 | shBrushXml.js |
5 Paso: Finalmente para que agregues el código a tus entradas, siempre irá con la etiqueta <pre>: Veamos un ejemplo para C++:
<pre class="brush: cpp">
//Comentario
int num;
</pre>
En el código especificamos para que lenguaje queremos el formato, en mi caso es para C++ por eso puse cpp, es según el brush. Para eso, en el
4 Paso esta agregado los lenguajes, el brush que irá para cada entrada y el nombre de archivo que se agrega en la plantilla.
Como se vería en nuestro Blog:
//Comentario
int num;
