Para las personas que usamos un blog (blogger) es muy molesto cuando estamos redactando un documento técnico. en el cual tenemos que escribir código fuente, independientemente del lenguaje de programación, por suerte, para esto existe una solución y se llama SyntaxHighlighter y la verdad es que es sumamente fácil de utilizar, debemos agregar a nuestra plantilla unos código y listo. Para instalarlo debemos:
En primer lugar (en la nueva interfaz) debemos plantilla -> edición html -> continuar.
Aquí debemos buscar la línea donde sale <head>, abajo de esto es donde debemos agregar todo lo que nosotros queramos. Los lenguajes que nos ofrece son muchos, pero al menos los que se llamar son los siguientes:
Volviendo al tema, entonces nos situamos en la edición html, y buscamos la palabra <head> bajo de esta agregamos lo siguiente:
<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 type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
Si se fijan en estos momentos acabamos de incorporar shCore.css, shThemeDefault.css y shCore.js, ahora solo nos queda implementar los lenguajes que nos interesen, por ejemplo les mostraré como tengo mi archivo de configuración.
<head>
<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/shBrushCss.js' type='text/javscript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.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/shBrushPython.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/shBrushCpp.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 type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
Ahora para implementarlo lo debemos hacer con la siguiente forma:
<pre class="brush: tipo_brush">
...código...
<pre>
Por ejemplo el código:
<pre class=”brush: php”
<?php
$link=mysqli_connect($host,$usuario,$password) or die('Error en la conexión');
mysqli_select_db($bd,$link) or die('Error en la base de datos');
return $link;
?>
</pre>
se vería de la siguiente forma:
$link=mysqli_connect($host,$usuario,$password) or die('Error en la conexión');
mysqli_select_db($bd,$link) or die('Error en la base de datos');
return $link;
Es importante tener en cuenta que el código no lo debemos colocar en el modo redactar, si no en el modo HTML, ya que si no, obtendrá otros valores y no se mostrará con el formato deseado.
Entradas
