Hay veces que queremos colocar en nuestro blog un trozo de código fuente. en Blogger se puede agregar el código dando una visualización diferente que permita resaltarlo frente al texto que se haya escrito en la entrada.
Para resaltar el código fuente se utiliza la librería SyntaxHighlighter, la cual es un resaltador desarrollado en javascript. Se puede ver un demo en la página oficial.
<!--SYNTAX HIGHLIGHTER INICIO--> <link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link> <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link> <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-->
De esta forma estamos agregando las librerías para cada lenguaje que vamos a utilizar.
Para resaltar el código que queremos se debe ingresar con las etiquetas <pre>. Por ejemplo al insertar código java se configura de la siguiente manera:
<pre class="brush: java">
public class Main {
//Código Java
}
</pre>
En los fragmentos de código donde tenemos el carácter "<"se debe reemplazar por < y el carácter ">" se debe reemplazar por > de esta forma no tendremos inconvenientes para que se interprete correctamente nuestro código.
Fuente: http://soloinformaticayalgomas.blogspot.com/2011/01/colocar-codigo-en-blogger-con.html
No hay comentarios:
Publicar un comentario