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.
Para utilizar
SyntaxHighlighter en Blogger, lo primero es ingresar a la opción "Plantilla" del menú izquierdo. En esta opción ponemos editar la plantilla que estamos utilizando en "Editar HTML":
Luego, después de la etiqueta <head> se agrega el siguiente código, y se guardan los cambios en la plantilla:
<!--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
