lunes, 20 de septiembre de 2010

blog, código fuente bonito

Para coloreado de sintaxis lo que mas aparecía nombrado era SyntaxHighlighter en la versión 2.
Actualmente está en la versión 3.

Las instrucciones para como usarlo desde blogger que son claras y resultaron bien están en Installing SyntaxHighlighter to blogger...

Hay dos maneras de incluir fragmentos de código:
Usando pre:
<pre class="brush: js">
    /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }
</pre>
Usando script - CDATA:
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
  /**
   * SyntaxHighlighter
   */
  function foo()
  {
      if (counter <= 10)
          return;
      // it works!
  }
]]></script>
que se verá como
/**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }
Usar pre es mas seguro, pero hay que escapar al menos los 'mayor que'.
CDATA no requeriría escapar nada, pero tiene los inconvenientes:
lectores RSS normalmente descartan los 'script'
varios navegadores terminan (equivocadamente) un script si encuentran un cierre de script dentro de un CDATA.
Si el codigo a mostrar no usa ese tag y podemos vivir con el inconveniente RSS, la forma CDATA es mucho mas cómoda.

El lenguaje se especifica con el valor de 'brush' ; hay bastantes disponibles. Aqui probablemte alcanzará con c, cpp, py, python, js, diff, patch, css, plain, xml xhtml xslt html

Conviene recortar un poco el jscript que metemos en el template para que solo cargue los lenguajes que precisamos.

Como comentario, encontré una mención de otro highlighter, hecho por google: Code highlighting on blogger

PD: al menos en noviembre 2010 si habilito spellchecker en el editor, me ensucia los CDATA.

No hay comentarios:

Publicar un comentario