Fragmentos de código de formato para bloguear en Blogger [cerrado]

282

Mi blog está alojado en Blogger y con frecuencia publico fragmentos de código en C/ C#/ Java/ XMLetc. pero encuentro que el fragmento se "destroza".

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

Hay varias preguntas sobre 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, necesita obtener esta hoja de estilo CSS y agregarle una referencia en la <head>sección de su página" . Ese es el problema: no puedes hacer esto en Blogger AFAIK.

formatting blogs blogger rbrayb
fuente
3
Para mostrar el código formateado: Si está utilizando Visual Studio, puede copiar cualquier tipo de código html / css / javascript / c # etc. a blogger. Debe
Ranadheer Reddy
Pruebe el complemento Pegar como código de Visual Studio para Windows Live Writer para el editor fuera de línea de Blogger. WYSIWYG! .
herohuyongtao
¿Te falta el casillero de contenido social como WordPress? ahora puedes agregar esto en blogger también stackoverflow.com/questions/27619171/…
craig lerr
1
Puede usar este sitio web para obtener código de resaltado de spinet de código para varios idiomas. te da html puedes publicarlo en tu blog hilite.me
Bhavikkumar
Puede copiar el código en intellij y pegarlo en su blog. Me funciona de maravilla
user3871494

Respuestas:

253

He creado una entrada de blog que explica cómo agregar resaltado de sintaxis de código a blogger usando la sintaxis Highlighter 2.0

Aquí está mi publicación de blog:

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

Espero que les sirva de ayuda. Estoy bastante impresionado con lo que puede hacer.

CraftyFella
fuente
2
¿Alguien puede confirmar si esto todavía funciona? Intenté pegar la etiqueta del script justo antes de la </head>sección y también agregué la etiqueta previa alrededor de mi código. Sin embargo, no hay cambio.
Arviman
2
Pasé un par de horas y no puedo hacer que esto funcione en absoluto.
thepaulpage
1
No funciona bien para el blogger de DYNAMIC view, ¿puedes proporcionar alguna alternativa? aquí está mi blog con vista dinámica satindersinght.blogspot.in
Satinder singh
1
Parece que al código que debe copiar y pegar le falta algo en la parte superior, específicamente una etiqueta <script>.
John Little
1
La respuesta de Samuel es mucho mejor. No me gusta agregar tantos javascripts en mi blog solo por un simple resaltado de sintaxis. Especialmente las páginas que no tienen ninguna sintaxis para resaltar es una exageración.
divinedragon
126

La forma más fácil de compartir código es con una idea pública. 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, se puede usar oculto diven la página tan simple como:

<div style="display:none"> content </div>
yodaisgreen
fuente
amigo, después de usarlo durante 20 minutos, ¡no puedo agradecerle lo suficiente! El mejor formato, sin complicaciones, todo el código está en un solo lugar, las publicaciones se ven hermosas, la edición de una publicación es increíblemente fácil ya que no mezcla el código con el resto de la publicación y nunca se preocupe de que lo haga. algo estúpido y perder / formatear mal cualquier código. Gracias hombre!
Elijah Saounkine
19
La inserción es JavaScript, hay una buena posibilidad de que sea invisible para la búsqueda. Eso casi lo mata para las publicaciones de blog.
James Moore
66
Actualmente estoy usando gists pero probablemente usaré SyntaxHighlighter nuevamente. No solo los gists usan JavaScript (lo que los hace inaccesibles también en los lectores RSS), sino que también ralentizan la carga de la página porque cada gist se descarga secuencialmente y bloquea el renderizado. No es una buena elección.
Tomasz Nurkiewicz
¡Gracias! Me has alegrado el día. Solo compartiré este script para agregar gist
daniel.sedlacek
1
¡Esta idea realmente funciona bien! el resultado es solo lo que necesito; código bien formateado ... pero no voy a ir con él. Prefiero que mi publicación esté completa dentro y fuera de sí misma. Tener el código, que es parte de la publicación, alojado en otro lugar e incluido a través de js, ¡simplemente lo derrota!
fecha
63

Para mi blog uso http://hilite.me/ para formatear el código fuente. Es compatible con muchos formatos y salidas bastante limpias html. Pero si tiene muchos fragmentos de código, debe copiar y pegar. Para formatear el código de Python, también utilicé Pygments ( publicación de blog ).

Samuel
fuente
Solía ​​usar hilite.me , pero ahora prefiero dillinger.io
GoYun.Info
También prefiero esto a gist.github. No se requiere javascript y estilo / css adicionales. Gracias Señor.
Prabowo Murti
40

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 :

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

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

gtiwari333
fuente
1
La respuesta más simple y ordenada en mi opinión. Simplemente crea un CSS interno y listo.
Rishik Mani
trabajando bien para mí también. solución simple
Hasitha
15

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 en forma cruda y luego envolverlos en prebloques 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 de los blogs de código.

Alain O'Dea
fuente
1
Sus instrucciones funcionaron mejor para mí que la otra respuesta principal. En caso de que alguien se encuentre buscándolos, aquí está la lista de pinceles agrupados y sus alias.
Scott
13

1. Primero, haga una copia de seguridad de su plantilla de blogger
2. Después de eso, abra su plantilla de blogger (en modo Editar HTML) y copie todos los CSS que figuran en este enlace antes de la </b:skin>etiqueta
3. Pegue el siguiente código antes de la </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 </body>etiqueta.

<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 de tu código aquí .
8. Aquí hay una lista de idiomas admitidos para el <class>atributo.

Mahesh Meniya
fuente
Un buen enlace. ¡Sería mejor si lo formatea en color! +1
Gaʀʀʏ
@le_garry: gracias tuve un problema al formatear el fragmento de código para que no esté en color.
Mahesh Meniya
Ver la respuesta de gissolved. El mejor resaltador que he visto hasta ahora, y tiene color.
Gaʀʀʏ
@le_garry Ohh, estás tomando nota de resaltar la sintaxis en Blogger. Funciona muy bien con el color. No entiendo que estás tomando mi respuesta. Entonces, me entristeció haberme enfrentado a algún problema ..
Mahesh Meniya
@MaheshMeniya Seguí todos los pasos que escribiste para sintaxis sintaxis resaltador pero no funciona, ¿hay alguna idea adicional de lo que me estoy perdiendo?
AA.SC
9

http://formatmysourcecode.blogspot.co.uk/ funciona bien, solo copia, formatea y pega.

Gob00st
fuente
Lo uso para mi blog. ¡Para las personas que aman los colores, sin embargo, esto no tiene código de color! Me encanta simple y llanamente.
Aravind
5

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

Phil Hale
fuente
Sí, tohtml es la solución recomendada por TechNet Wiki para pegar código.
rbrayb
@ Phil Hale No hay sangría en esa herramienta
usuario2771655
Esta es la mejor solución que encontré hasta ahora. Gracias
Kinjal
5

Aquí hay un sitio que formateará su código y escupirá html, e incluso incluye estilos en línea para colorear sintaxis. Puede que no funcione para todas sus necesidades, pero es un buen comienzo. Creo que ha puesto a disposición la fuente si desea ampliarla:

Rico
fuente
Ya no funciona
Ε Г И І И О
4

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 encarga de todos los símbolos '<' y '>' que los convierten en '& lt;' y '& gt;'. Las pestañas se convierten en espacios para que tengan el mismo aspecto en diferentes navegadores. Incluso puede hacer que el colorizador incorpore los estilos CSS, en caso de que no pueda o no desee insertar una hoja de estilos CSS en su blog o sitio web.

Pavel Vladov
fuente
3

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

Pete Kirkham
fuente
De acuerdo: hay varias opciones si alojo mi propio blog, pero no parece haber mucho apoyo cuando el blog está realmente alojado por Blogger.
rbrayb
2

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

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

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

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

Zsolt Botykai
fuente
1

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 fanático de tu propio esquema de color emacs, tienes una opción mucho mejor disponible. He pirateado el paquete "htmlize.el" para que emacs agregue las siguientes cuatro funciones ...

  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 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 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 )

Sujeet
fuente
0

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

Básicamente, por lo que puedo decir, el editor de blogger a veces se comerá sus corchetes angulares si cambia entre el modo de composición y HTML. Por lo tanto, debe pegar en modo HTML y luego guardar directamente. (Puedo estar equivocado en esto, solo lo intenté ahora y parece funcionar, ¿depende del navegador?)

¡Es horrible cuando tienes genéricos!

Benjol
fuente
0

Para publicar su html, javascript, c # y java, debe convertir caracteres especiales en código HTML. como '<'as &lt;y '>'to &gt;y etc.

Agregue este enlace Code Converter a iGoogle. Esto te ayudará a convertir los caracteres especiales.

A continuación, agregue la nueva versión SyntaxHighlighter 3.0.83 para personalizar su código en blogger. Pero debe saber cómo configurar el sintaxis Highlight en su plantilla de blogger.

Mdhar9e
fuente