263 votos

Formato de los fragmentos de código para blogs en Blogger

Mi blog está alojado en Blogger y me frecuentemente post fragmentos de código en C / C# / Java / XML etc. pero me parece que el fragmento se "alteran".

Hay sitios web que podría utilizar para analizar el fragmento de antemano y ordenar el formato, convertir XML "< " " &lt;", etc.

Hay un número de preguntas en torno a esta área, pero no pude encontrar ninguna que abordar esta cuestión directamente.

Edit: Para @Ricos en respuesta, el sitio de los estados "Para mostrar el formato de código en su sitio, usted necesita para obtener este archivo de estilos CSS y agregar una referencia a él en el <head> sección de tu página". Ese es el problema - usted no puede hacer esto en Blogger AFAIK.

244voto

CraftyFella Puntos 4329

He creado una entrada del blog post donde se explica cómo agregar código resaltado de sintaxis a blogger utilizando la syntaxhighlighter 2.0

Aquí está mi blog post:

http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-Engine.html

Espero que te ayuda a chicos... Estoy muy impresionado con lo que puede hacer.

113voto

yodaisgreen Puntos 982

Es la forma más fácil de compartir código con un público esencial. Sólo escribir uno y pegar en el código de embed. Easy peasy.

http://GIST.github.com

55voto

Samuel Puntos 605

Para mi blog uso http://hilite.me/ al código fuente de formato. Soporta muchos formatos y salidas preferiría limpiar html. Pero si tienes un montón de fragmentos de código entonces tienes que hacer un montón de copiar pegar. Para dar formato al código Python también he usado Pygments (blog post).

35voto

gt_ebuddy Puntos 6551

Este css secuencia de comandos podría ser útil para todos - no es para resaltado de sintaxis, pero funciona bien para presentar el código fuente en formato original :

 <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; 
                color: #000000; background-color: #eee;
                font-size: 12px; border: 1px dashed #999999;
                line-height: 14px; padding: 5px; 
                overflow: auto; width: 100%">
       <code style="color:#000000;word-wrap:normal;">

            <<<<<<<YOUR CODE HERE>>>>>>>

       </code>
 </pre>

Cómo utilizar :

  1. Pega este fragmento de código en el editor de texto,
  2. pegar el código en<<<<<<>>>>>> bloque.
  3. Copiar todos y
  4. pegar a la vista HTML en blogger(o cualquier otro) puesto de editor.

VENTAJAS : Simple y fácil de usar, menos de configuración, fáciles de reconfigurar, ningún software extra

15voto

Alain O'Dea Puntos 6587

Esto se puede hacer con bastante facilidad con SyntaxHighlighter. Tengo el paso a paso las instrucciones para la configuración de SyntaxHighlighter en Blogger en mi blog. SyntaxHighlighter es muy fácil de usar. Que te permite publicar fragmentos en formato raw y luego envolverlos en pre bloques como:

<pre name="code" class="brush: erlang"><![CDATA[
-module(trim).

-export([string_strip_right/1, reverse_tl_reverse/1, bench/0]).

bench() -> [nbench(N) || N <- [1,1000,1000000]].

nbench(N) -> {N, bench(["a" || _ <- lists:seq(1,N)])}.

bench(String) ->
    {{string_strip_right,
    lists:sum([
        element(1, timer:tc(trim, string_strip_right, [String]))
        || _ <- lists:seq(1,1000)])},
    {reverse_tl_reverse,
    lists:sum([
        element(1, timer:tc(trim, reverse_tl_reverse, [String]))
        || _ <- lists:seq(1,1000)])}}.

string_strip_right(String) -> string:strip(String, right, $\n).

reverse_tl_reverse(String) ->
    lists:reverse(tl(lists:reverse(String))).
]]></pre>

Acaba de cambiar el cepillo de nombre a "python" o "java" o "javascript" y pegar en el código de su elección. La CDATA etiquetado vamos a poner casi cualquier código de ahí sin tener que preocuparse acerca de los caracteres de escape de entidad o de otras típicas molestias de código de blogs.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X