Novedosa caja para codigos

Esta ha sido la manera como muchos hemos presentado códigos en nuestras entradas:

Pero... ¿que tal ésta caja para códigos? :

Verdad que es muy vistosa. Para ello hay que utilizar una aplicación: "Highlighter". El código para implementarlo dentro de nuestra plantilla blogger es como sigue:

<link href='http://sites.google.com/site/caprichosacallenaranja/archivadorjs/SyntaxHighlighter-conborde.css' rel='stylesheet' type='text/css'/>

<script language='javascript' src='http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shCore.js'/>

<script language='javascript' src='http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushCSharp.js'/>

<script language='javascript' src='http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushXml.js'/>

<script language='javascript' src='http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushCss.js'/>

<script language='javascript' src='http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushJScript.js'/>

<script language='javascript' src='http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushSql.js'/>

Accedemos a nuestra plantilla de la manera acostumbrada, expandimos artilugios, y ayudados por nuestro buscador de códigos (CTRL+F)  ubicamos   </head> , y justo encima colocamos el código.Continuando ubicamos ahora  </body> y debajo colocamos este otro código:

   

<script language='javascript'>

  dp.SyntaxHighlighter.ClipboardSwf = 'http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/clipboard.swf';

  dp.SyntaxHighlighter.BloggerMode(); 

  dp.SyntaxHighlighter.HighlightAll('code'); 

</script>

Ahora lo que hacemos es "guardar plantilla" sin olvidar, despues, el desmarcar artilugios. Sólo nos queda para completar toda la operación implementar el código que va a permitir que nuestros códigos aparezcan igual al de la imágen del ejemplo, y para ello nos vamos a configuración  ==>  formato  ==> plantilla de entrada, que es donde vamos a colocar éste último código para tenerlo siempre a mano:

 

<pre name="code" class="XXXX">

AQUÍ EL CÓDGIO

</pre>
 

La parte donde aparece "XXXX" debes colocar html que es el tipo de código que vamos a mostrar en la caja. Si quieres eliminar la numeración en las líneas debes agregarle "nogutter" de la siguiente manera:

Fuente: el-abacabu




Espero les halla sido de utilidad.