JMiur [E]

Snipplr es un sitio donde se comparten códigos de distintos lenguajes (PHP, JavaScript, HTML, CSS). No es un lugar para alojar archivos sino para mostrar códigos y hacerlo de manera prolija, resaltando la sintaxis, numerando líneas, etc.

Lo interesante del sistema es que podemos incluir esos códigos ya formateados directamente en una página web ya sea usando un plugin para WordPress o embebiéndolo con un simple script que ellos nos ofrecen y que copiamos y pegamos. Por ejemplo:
<div id="snipplr_embed_271" class="snipplr_embed"><a href="http://snipplr.com/view/271/browser-detection/">Code snippet - Browser Detection</a> on Snipplr</div><script type="text/javascript" src="http://snipplr.com/js/embed.js"></script><script type="text/javascript" src="http://snipplr.com/json/271"></script>
Se vería de este modo:


Como lo que se agrega son etiquetas, podemos crear definiciones ya que hay una clase CSS que las define. Un ejemplo:
div.snipplr_embed { /* es el bloque contenedor */
background-color: #EEE;
margin: 0 auto;
padding: 10px 40px;
width: 500px;
}
div.snipplr_embed h3 { /* es el título del código */
color: #345;
font-size: 20px;
font-weight: normal;
margin: 0;
padding: 0;
}
div.snipplr_embed pre { /* el código en si mismo */
color: #000;
}
div.snipplr_embed ol { /* el código es una lista ordenada */
margin:10px 0;
}
div.snipplr_embed ol li { /* cada línea de esa lista */
margin:10px 0;
}
div.snipplr_embed p { /* la línea final con el enlace */
color: #000;
font-size: 11px;
text-align:right;
}
div.snipplr_embed p a {
color: #000 !important;
}
Podemos usar su contenido de manera libre pero si queremos agregar los nuestros, hay que registrarse y luego, en crear un snippet, colocamos los datos que nos solicitan, escribimos el código y lo guardamos seleccionando si será público o privado.

11 comentarios:

Diego  

Muy bueno sí señor, pero ¿no hay ninguna forma para que no salga lo de View this snippet on Snipplr?

Responder
JMiur  

Con esto quedaría oculto, Diego:

div.snipplr_embed p {display:none;}

Responder
Diego  

Gracias :D

Ahora la pua es que al copiar el código desde ahí, también copia intercalademente entre líneas los números 1, 2, 3... :S:S:S

Responder
JMiur  

Sí, eso pasará a menos que utilices algún script especial, cosa que en Blogger es excesivamente complicado.

Responder
SadlyMistaken  

Guau q curioso, gracias abundantes :P

Responder
egoloco  

Como uso el código? donde lo pongo en mi blog? lo tengo que poner en una entrada?? en realidad........ como se usa?? perdoná mi ignorancia jaja

Responder
JMiur  

Lo colocas en los posts, justo donde quieras que se muestre.

Responder
Pollet  

Hola, lo estoy intentando usar con blogger pero me muestra solo el enlace , no todo el div, como lo has incrustado en blogger ?

JMiur  

Tal como dice el post, usando el script para incrustarlo que ellos proporcionan.

Pollet  

Ok, lo que pasa que me inserta el link en el blog cuando pongo el código , no el código en si

Es decir, al incrustar : div id="snipplr_embed_271"..... me inserta el link, no el código formateado

JMiur  

Inserta el codigo que ellos te dan para el snipplr que hayas creado.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR