formatting - personal - Formato de fragmentos de código para blogging en Blogger

ejemplos de como escribir un blog (16)

Aquí hay 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 sus necesidades, pero es un buen comienzo. Creo que ha hecho disponible la fuente si quiere extenderla:

Mi blog está alojado en Blogger y frecuentemente publico fragmentos de código en C / C# / Java / XML etc., pero encuentro que el fragmento de código se "destroza".

¿Hay algún sitio web que pueda usar para analizar el fragmento de antemano y ordenar el formato, convertir XML " < " a " < " etc.

Hay un número de preguntas en torno a esta área en SO, pero no pude encontrar ninguna que aborde esta pregunta directamente.

Edit: Para la respuesta @Rich , el sitio dice "Para mostrar el código formateado en su sitio, debe obtener esta hoja de estilo CSS y agregar una referencia a él en la sección <head> de su página" . Ese es el problema: no puedes hacer esto en Blogger AFAIK.

En realidad, yo había usado (qué más ;-)) Vim para esto: tiene un "plugin" 2html. Vea los documentos aquí .

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

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

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

Este script css puede 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>

Cómo utilizar :

Pega este fragmento en el editor de texto,
pega tu código en el bloque <<<<<< >>>>>>
Copiar todo y
pegar en la vista HTML en el editor de blogger (o cualquier otro).

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

Esto se puede hacer con bastante facilidad 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 de código en formato sin formato y luego envolverlos en bloques pre 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 CDATA le permite poner prácticamente cualquier código allí sin preocuparse por el escape de la entidad u otras molestias típicas del blogging de código.

He creado una entrada de blog que explica cómo agregar resaltado de sintaxis de código a blogger utilizando syntaxhighlighter 2.0

Aquí está mi entrada de blog:

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

Espero que les ayude, muchachos ... Estoy muy impresionado con lo que puede hacer.

He creado una herramienta que hace el trabajo. Lo puedes encontrar en mi blog:

Gratis en línea C # Code Colorizer

Además de colorear su código C #, la herramienta también se ocupa de todos los símbolos ''<'' y ''>'' convirtiéndolos en ''& lt;'' y ''& gt;''. Las pestañas se convierten en espacios para tener el mismo aspecto en diferentes navegadores. Incluso puede hacer el colorizador en línea con los estilos CSS, en caso de que no pueda o no quiera insertar una hoja de estilo CSS en su blog o sitio web.

Hice mi propio rollo en F # (vea this pregunta), pero aún no es perfecto (solo hago expresiones regulares, así que no reconozco las clases ni los nombres de los métodos, etc.).

Básicamente, por lo que puedo decir, el editor de blogger a veces se comería tus corchetes angulares si cambias entre el modo Redactar y el modo HTML. Así que tienes que pegar en modo HTML y luego guardar directamente. (Puede que esté equivocado en esto, lo he intentado ahora y parece funcionar, ¿depende del navegador?)

Es horrible cuando tienes genéricos!

La forma más fácil de compartir código es con una idea pública. Solo escribe uno y pega el código de inserción. Pan comido.

http://gist.github.com

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

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

Para mi blog utilizo hilite.me para formatear el código fuente. Es compatible con muchos formatos y salidas en lugar de HTML limpio. Pero si tienes muchos fragmentos de código, entonces tienes que hacer un montón de copiar y pegar. Para formatear el código Python también he usado Pygments ( publicación de blog ).

Para publicar su código html, javascript, c # y java, debe convertir caracteres especiales a código HTML. como ''<'' como < y ''>'' a > y etc.

Agrega este enlace Convertidor de código a iGoogle. Esto te ayudará a convertir los caracteres especiales.

Luego, agregue la nueva versión de syntaxhighlighter para personalizar su código en blogger. Pero debes saber cómo configurar la sintaxis y el iluminador en tu plantilla de blogger.

Parece que ha habido algunos cambios con SyntaxHighlighter 2.0 que facilitan su uso con Blogger.

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

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

Yo uso una solución de tecnología bastante baja. Formato el código con esta herramienta de resaltado de sintaxis en línea y luego péguelo en el blog

http://formatmysourcecode.blogspot.co.uk/ funciona bien, simplemente copie, formatee, vuelva a pegar.

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

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

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

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

<pre name="code"> ...Your html-escaped code goes here... </pre> <pre name="code" class="php"> echo "I like PHP"; </pre>

7. Puedes escapar de tu código here .
8. Here está la lista de lenguaje soportado para el atributo <class> .

Respuesta específica de Emacs: En cuanto 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. Pero, como yo, si eres fanático de tu propio esquema de color de Emacs, tienes una opción mucho mejor disponible. He pirateado el paquete "htmlize.el" para que emacs agregue las siguientes cuatro funciones ...

blog-htmlize-buffer
blog-htmlize-region
blog-htmlize-buffer-with-linum
blog-htmlize-region-with-linum

Estas funciones emitirá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 a como vería el código en emacs (incluido el esquema de color).

Aquí hay un enlace a mi blog , donde puede encontrar información detallada sobre cómo usar 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 lenguaje de sus fragmentos de código, 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 )