Snipplr: Mostrar códigos formateados

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:

Code snippet - Browser Detection on Snipplr

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.

Code snippet - Ejemplo de un widget de Blogger on Snipplr