Formatear fragmentos de código para bloguear en Blogger [cerrado]

La forma más fácil de compartir código es con un gist público. Simplemente escriba uno y pegue el código de inserción. Pan comido.

Http://gist.github.com

Para abordar el problema del motor de búsqueda, uno puede usar oculto div en la página tan simple como:

<div style="display:none"> content </div>

Para mi blog utilizo http://hilite.me / para dar formato al código fuente. Soporta muchos formatos y produce html bastante limpio. Pero si tienes muchos fragmentos de código, entonces tienes que hacer un montón de copiar y pegar. Para formatear código Python también he usado Pygments (blog post ).

Este script css podría ser útil para todos - No es para resaltar la 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>

Modo de empleo:

1. Pega este fragmento en el editor de texto,
2. pegue su código en >>>>> bloquear.
3. Copiar todo y
4. pegar a la vista HTML en blogger(o cualquier otro) editor de post.

BENEFICIOS: Simple y fácil de usar, menos configuración, fácil de reconfigurar, sin extras software

Esto se puede hacer bastante fácilmente con SyntaxHighlighter. Tengo instrucciones paso a paso para configurar SyntaxHighlighter en Blogger en mi blog. SyntaxHighlighter es muy fácil de usar. 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>

Simplemente cambie el nombre del pincel a "python" o "java" o "javascript" y pegue el código de su elección. El etiquetado de CDATA le permite poner casi cualquier código allí sin preocuparse por la entidad escapar u otras molestias típicas de los blogs de código.

1. Primero, haz una copia de seguridad de tu plantilla de blogger
2. Después de eso, abra su plantilla blogger (En modo Editar HTML) y copie la etiqueta all css dada en este enlace antes de </b:skin>
3. Pegue el siguiente código antes de </head> etiqueta

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

4. Pegue el siguiente código antes de la etiqueta </body>.

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

5. Guardar Plantilla de Blogger.
6. Ahora el resaltado de sintaxis está listo para usar, puede usarlo con <pre></pre> etiqueta.

<pre name="code">
...Your html-escaped code goes here...
</pre>

<pre name="code" class="php">
    echo "I like PHP";
</pre>

7. Puedes escapar tu código aquí.
8. Aquí está la lista de idiomas soportados para <class> atributo.

Http://formatmysourcecode.blogspot.co.uk / funciona bien, solo tienes que copiar, formatear, pegar.

Aquí está un sitio que formateará su código y escupirá html, e incluso incluye estilos en línea para colorear la sintaxis. Puede que no funcione para todas tus necesidades, pero es un buen comienzo. Creo que ha hecho que la fuente esté disponible si quieres ampliarla:

Utilizo SyntaxHighlighter con mi blog impulsado por Blogger. Sin embargo, el sitio real está alojado en mi propio servidor en lugar del de Blogger (Blogger tiene la opción de publicar mensajes ftping en su propio sitio), pero tener su propio dominio y alojamiento web solo cuesta un par de dólares al mes.

Parece Que ha habido algunos cambios con SyntaxHighlighter 2.0 que hacen que sea más fácil de usar con Blogger.

Hay versiones alojadas de los estilos y Javascripts en: http://alexgorbatchev.com/pub/sh /

Uso una solución de tecnología bastante baja. Formateo el código usando esta herramienta de resaltado de sintaxis en línea y luego simplemente lo pego en el blog

He creado una herramienta que hace el trabajo. Usted puede encontrar en mi blog:

Colorizador de Código C # en Línea Gratis

Además de colorear su código C#, la herramienta también se encarga de todos los símbolos '' que los convierten en '

En realidad había usado (what else ;-) ) Vim para esto: tiene un "plugin"de 2html. Ver los documentos aquí.

Así que mientras edito mi código, simplemente lo convierto a HTML y pego los resultados en el editor HTML de Blogger.

Nota: no es HTML tan hermoso (css incrustado sería mejor), pero simplemente funciona.

Oh: y tiene archivos de sintaxis para varios idiomas, lo que lo hace bastante útil.

Respuesta específica de Emacs: En lo que respecta a blogger, permite css en línea. El problema con los resaltadores basados en javascript es que tienes que vivir con su esquema de color o implementar el tuyo propio. Pero, como yo, si eres un fan de tu propio esquema de color emacs, tienes una opción mucho mejor disponible. He hackeado el " htmlize.el " paquete para emacs para agregar los siguientes cuatro función...

1. blog-htmlize-buffer
2. blog-htmlize-region
3. blog-htmlize-buffer-with-linum
4. blog-htmlize-region-with-linum

Estas funciones generarán html listo para copiar y pegar (estilo en línea) en un nuevo búfer en emacs, que puede usar directamente en su publicación de blog. La salida se ve exactamente igual que el código en emacs (incluyendo el esquema de color).

Aquí hay un enlace a mi blog, donde se puede encontrar detallada información de cómo utilizar el "blog-htmlize.el " con emacs. Esto elimina la codificación html de los signos" menor que "y" mayor que " también. Y como emacs está haciendo todo el resaltado y el estilo, no tiene que preocuparse por si la biblioteca js admite el idioma de sus fragmentos, ni tiene que entrometerse con su código de plantilla en blogger.

Puede encontrar el archivo elisp aquí (guarde el archivo como blog-htmlize.el )

Puse el mío en F# (ver esta pregunta), pero todavía no es perfecto (solo hago expresiones regulares, por lo que no reconozco clases o nombres de métodos, etc.).

Básicamente, por lo que puedo decir, el editor de blogger a veces se comerá tus corchetes angulares si cambias entre el modo Compose y el HTML. Así que tienes que pegar en el modo HTML y luego guardar directamente. (Puedo estar equivocado en esto, acaba de intentar ahora y parece que funciona - navegador dependiente?)

Es horrible cuando tienes ¡genéricos!

Para publicar su html, javascript,c# y java debe convertir caracteres especiales a código HTML. as '<' as < and '>' to > and e. t. c..

Añadir este enlace Code Converter a iGoogle. Esto le ayudará a convertir los caracteres especiales.

Luego agrega SyntaxHighlighter 3.0.83 nueva versión para personalizar tu código en blogger. Pero deberías saber cómo configurar SyntaxHighlighter en tu plantilla blogger.