SyntaxHighlighter formata tus códigos de forma sencilla.

Hace ya mucho me vi en la obligación de crear un pequeño script para formatar correctamente códigos y así poder publicarlos en blogger.

Hace uno o dos días, hablando con yoyahack me explicó que existia una alternativa para "colorear" los códigos en tu blog o web independientemente del cms o la distribución.

Su nombre es SyntaxHighlighter

Su instalación es simple, solo debemos agregar estos códigos js en nuestras cabeceras:

<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/shThemeRDark.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>


y a la hora de redactar encerraremos nuestro códgio entre:
<pre class="brush: js">

</pre>

o

<pre class="brush: php">

</pre>

Hay más lenguajes que estos dos, solo son los que yo uso más... también podemos omitir los scripts js de los lenguajes que no vayamos a utilizar.

El único inconveniente es que aún necesitamos un pequeño script para hacer la función htmlentities() y así no tener problemas con los símbolos < >.

El script que yo uso es:
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" style="margin-bottom:40px">

<div id="formulario">

<textarea rows="20" cols="80" name="codigo"></textarea> <br />
<input type="submit" name="enviar" value="Formatear" /></div>

</form>

<?php

if (!empty($_POST['codigo'])) {

$codigo = $_POST['codigo'];
$codigo = str_replace("t", " ", $codigo);
$codigo = htmlentities(stripslashes($codigo));

$file = fopen("tmp.txt", "w");
fwrite($file, $codigo);
fclose($file);

$lineas = file('tmp.txt');
unlink('tmp.txt');

for ($i = 0; $i < count($lineas); $i++)
$resultado = $resultado.htmlentities($lineas[$i])."<br />";

echo '<h3> Inserta ste codigo en tu site: </h3>' .$resultado.'</div>';
}

?>

Eso es todo.

nax
2 Responses
  1. Fabìan Says:

    Muy bueno aunque prefiero el Prettifier http://programandoideas.com/2010/02/javascript-code-pretiffier-pinta-codigos-de-distintos-lenguajes-de-programacion-en-tu-web/

    Que no hay necesidad de incluir un .js para cada lenguaje a utilizar, lo bueno de este seria entonces que es liviano.

    Gracias por el aporte.


  2. nax Says:

    Se parecen mucho no crees?

    no estudié el js que comentas pero creo que puedo plantearte otra perspectiva.

    Si podemos elejir solo los lenguajes que utilizaremos, no estamos dando un mayor rendimiento y ligereza a la web?

    yo de momento los tengo todos, pero cuando me de por optimizarlo quitaré los que se que no voy a usar :P

    saludos
    nax