cómo mostrar el fragmento de código en blogs

Tengo un pequeño blog en blogger.com y utilizo una plantilla gratuita simple que encontré por ahí. De vez en cuando publico fragmentos de código sobre mis hallazgos. El código se formatea de una manera bastante fea. Veo por ahí que algunos bloggers tienen una plantilla elegante para mostrar el código.cómo mostrar el fragmento de código en blogs

¿Dónde encuentro esa plantilla para blogger? ¿O qué puedo hacer para lograr lo mismo?

Gracias, mE

Fuente

2010-07-08 amok

¿Qué tal un enlace a uno de esos blogs con fragmentos de código extravagantes? –

posible duplicado de [¿Cómo puedo mostrar el código mejor en mi blog blogger?] (Http://stackoverflow.com/questions/1644201/how-can-i-display-code-better-on-my-blogger-blog) – paulmorriss

Tengo el mismo problema pero lo solucioné al mirar este tutorial. –

tengo que introducir regularmente fragmentos de código en entradas del blog. La forma más fácil que he encontrado es mantener un archivo de reducción en github y luego copiar los fragmentos de código en el blog. Viene con resaltado de sintaxis completo en el idioma de su elección. Y no hay complementos e intuitivo, fácil de usar.

Por ejemplo, si se escribe en Ruby, Todo lo que necesita hacer es escribir este

```ruby 
    [Your ruby code goes here] 
```

A modo de ejemplo, este es un blog recientemente he lanzado con resaltado de sintaxis http://blog.iron.io/2013/09/ironcast-1-introduction-to-ironworker.html

Y este es el archivo de rebajas que corresponde a las publicaciones del blog. https://github.com/iron-io/ironcasts-series-1/blob/master/Code-Snippets.md

PD: si quieres una manera más rápida para editar su rebaja, también sugeriría http://dillinger.io/ para la edición rápida

Fuente

2013-09-11 01:10:58 samol

¿Puede explicar en detalle la parte de "copiar el fragmento de código en el blog"? – Suhas

@Suhas, por lo que básicamente resaltar el fragmento de código en su esencia y luego copiar y pegar eso en blogspot. Esto funciona porque la copia también copia todo el html (que contiene el resaltado) y cuando html se pega en blogspot, se procesará. – samol

página no disponible – programtreasures

Puede utilizar SyntaxHighlighter, el autor ha proporcionado una versión hospedada por lo que sólo tiene que ir a su plantilla del blog, seleccione Edición HTML y añadir siguiente código al principio de la página

<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPowerShell.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDiff.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js' type='text/javascript'/> 
<script type='text/javascript'> 
    SyntaxHighlighter.all(); 
</script>

se puede ver en el ejemplo my blog

Fuente

2010-07-08 20:38:30 oscarkuo

Solo como referencia, esa sintaxis se resalta de una manera un tanto desagradable. Solo señalando la ironía en una publicación sobre cómo arreglar tales cosas. :) – cHao

por lo general, hay plugins para lograr lo que estás buscando (Wordpress tiene toneladas y toneladas), pero no estoy seguro acerca de Blogger.

Probablemente pueda usar Javascript para hacer lo mismo; he aquí un ejemplo: http://www.halhelms.com/blog/index.cfm/2008/12/11/Code-Formatting-in-Blog-Pages-with-jQuery

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

Fuente

2010-07-08 20:38:53 amfeng

Luché tratando de conseguir SyntaxHighlighter para trabajar durante mucho tiempo (el cromo y Blogger producen divs desplazamiento horribles).

Finalmente me decidí por Google Code Prettify. Parece más sencillo que SyntaxHighlighter, pero funciona muy bien.

Todo lo que necesita saber puede encontrarse en la carga README

la secuencia de comandos en la sección <head> de la plantilla de blogger:

<script language='javascript' type='text/javascript' 
    src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' /> 
<script language='javascript' type='text/javascript' 
    src='http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js'/> 

<script type='text/javascript'> 
function addLoadEvent(func) { 
    var oldonload = window.onload; 
    if (typeof window.onload != 'function') { 
    window.onload = func; 
    } else { 
    window.onload = function() { 
     if (oldonload) { 
     oldonload(); 
     } 
     func(); 
    } 
    } 
} 
addLoadEvent(prettyPrint); 
</script>

El formato utilizando <pre class="prettyprint"> o <pre class="prettyprint lang-yaml">' o en línea con <code class="prettyprint">.

Oh, es compatible con varios idiomas y themes.

Fuente

2011-10-28 23:00:05 TrophyGeek

También puede incrustar archivos de Bitbucket o GIST desde Github:

cómo:

Bitbucket (Sólo para no dinámica visitas)

Crear una cuenta Bitbucket si no tiene uno
Crear un repositorio y pulsar su código
Abrir uno de sus archivos de origen como this one y haga clic en incrustar.
Copie el javascript a su post.

Gist (Para vistas no dinámicas.Consulte a continuación las vistas dinámicas)

Cree una cuenta Github si no tiene una.
Vaya a Gist y pase su código en un momento.
Crea una idea como esta one y haz clic en Insertar.
Copiar el Javascript en su puesto

Síntesis de las vistas dinámicas de Blogger

Ver Moski's tutorial

Fuente

2013-06-15 01:56:12 IsKernel

Muchas gracias :) –

La mayoría de los usuarios de Blogger utilizan blockquote para mostrar códigos. Lo cual es un enfoque muy equivocado. Las blockquotes están diseñadas para mostrar los esfuerzos de diferentes páginas web que, cuando se usan para códigos, les dan un estilo desagradable. Use las etiquetas <pre> and <code> para mostrar sus códigos. El navegador mostrará tus códigos como deberían. Aquí está el formato -

<pre> 
<code> 
your code goes here 
</code> 
</pre>

Leer más sobre por qué el uso de estas etiquetas para blogger - http://www.howtokickblogger.com/2013/06/blockquote-code-or-pre-tag-for-blogger.html

Fuente

2013-08-11 19:51:25

utilizo el SyntaxHighlighter 3+ librería javascript. Escribí una publicación simple para blogger que es una configuración más optimizada.

http://modelarchitecture.blogspot.com/2013/12/configuring-javascript-syntaxhighligher.html

Fuente

2013-12-25 10:46:54

he implementado una herramienta que puede dar formato al código y mostrarlo en blogger. Pruébalo aquí http://www.dukaweb.net/p/format-source-code.html.

La idea está utilizando <pre><code> etiqueta y contar el número de filas usando javascript

Fuente

2014-01-06 09:01:52

Puede utilizar Google-Code-Prettify que es el módulo de JavaScript y css. Esto puede ayudarlo a resaltar la sintaxis de sus fragmentos de código. Muchos grandes nombres en web-sphere están usando Google-Code-Prettify para potenciar el resaltado de sintaxis en sus sitios web, p. code.google.com e incluso stackoverflow.com. Aquí hay un method for installing and using Google-Code-Prettify in Blogger.

Fuente

2014-02-16 13:20:20

cómo mostrar el fragmento de código en blogs

Respuesta

Cuestiones relacionadas