Syntax highlighting con Prettify

Agregar esta línea en el head de la plantilla del blog:

<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js'/>

Uso

<pre class="prettyprint lang-js">
function holaMundo(){ 
    
     alert('hola!');
}
</pre>

El lang-js significa que el código es javascript, si el codigo que queremos mostrar es html iría lang-html, si fuera java sería lang-java y así. Los lenguajes soportados son:

lang-none

lang-default

lang-bsh

lang-c

lang-cpp

lang-cs

lang-csh

lang-css

lang-hs

lang-html

lang-java

lang-js

lang-lisp

lang-lua

lang-ml

lang-perl

lang-php

lang-py

lang-proto

lang-rb

lang-scala

lang-sh

lang-sql

lang-vb

lang-xml

El resultado es:

function holaMundo(){ 
    
     alert('hola!');
}

Es posible poner una skin y o lenguaje como default pasándolo como parámetro al importar el js:

<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=nombre-de-skin&lang=lenguaje'/>

Skins disponibles: 

http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html

Más información:

https://code.google.com/p/google-code-prettify/wiki/GettingStarted

Script para autogenerar botones de spoiler

Seguramente reinventé la rueda, pero cuando busqué cómo se hacía para agregar spoilers de este estilo al blog:

Bla bla bla
esto es un spoiler

Sólo encontré cómo hacerlo "manualmente". Así que armé un script que lo que hace es buscar elementos de clase spoiler, agregarles un botón antes y ocultarlos.


Script

function clickSpoiler(boton){
  
   var spoiler = $(boton).next(".spoiler");
   
   if(boton.value=='¡Spoiler!'){
      
      boton.value='Ocultar';
      spoiler.show();
      
   }else{
      
       boton.value='¡Spoiler!';
       spoiler.hide();
   }
    
}

function formatSpoilers(){
    
    var spoilers = $('.spoiler');
   
    //Agrego el botón spoiler antes de cada spoiler y oculto el spoiler.
    spoilers.before("<input type='button' class='boton-spoiler' value='¡Spoiler!' onclick='clickSpoiler(this)'/>");
    spoilers.hide();
  
}
    
//Le digo que se llame a la función formatSpoilers una vez que terminó de cargar la página.
$(document).ready(function() {
      
        formatSpoilers();
        
    });

¡Atención! Para que el script funcione es necesario incluir JQuery:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
   

Tengo el código subido a Google Drive (Cómo importar js/css/etc subidos a Google Drive), pueden usarlo directamente agregando esto en el head de la plantilla:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
<script src='http://googledrive.com/host/0B5-ml0fgoFXGMzR4VGtqcGZuYWM' type='text/javascript'/>

Uso

Para convertir algo en spoiler sólo hay que agregarle class="spoiler" al elemento. Ejemplo:

<div class="spoiler"> 
    Bla bla bla
</div>

Otra opción es reemplazar en el código los lugares donde dice $('.spoiler') por $('spoiler') (O sea, quitarle el puntito), y escribir los spoilers así:

<spoiler> Bla bla bla </spoiler>

Si alguien sabe cuál de las dos formas es mejor que me diga, lo ignoro.




¡Atención! Como el script se ejecuta al finalizar la carga de la página, los spoilers pueden leerse unos segundos antes de que aparezca el botón, para solucionar esto se puede poner display de los spoilers en none.

<div class="spoiler" style="display:none;"> 
    Bla bla bla
</div>

La desventaja de esto es que no se ven en el editor.

Otra opción que no tiene ese problema, es agregar en la plantilla un archivo CSS que contenga esto:

.spoiler{

   display:none;

}

Como el archivo no es procesado durante la edición, el texto no desaparece :)

Importar js/css/etc subidos a Google Drirve

Soy nueva en blogger y en javascript, lo primero que quise saber era cómo se hacía para importar scripts para no tener que escribir directo en la plantilla. Encontré un tutorial en inglés que explica cómo hacerlo hosteando los archivos en Google Drive, el link lo pueden encontrar al final de esta entrada.

Los archivos se importan agregando esto dentro del head de la plantilla:

Para CSS:

<link href=link-del-archivo rel='stylesheet'/>

Para Javascript:

<script src=link-del-archivo type='text/javascript'/>

Nos falta ver cómo obtenemos el link,

1. Entramos a Google Drive.
2. Creamos o subimos el archivo CSS/Javascript.
3. Botón derecho sobre el archivo->Compartir...->Compartir...-> Cambiar a Público en la web
4. Copiamos el link, tiene este formato:
https://docs.google.com/file/d/codigo-de-mi-archivo/edit?usp=sharing


5. De ese link lo que nos importa es el código, el link que debemos poner en la plantilla es:
https://googledrive.com/host/codigo-de-mi-archivo

Cuando quieras cambiar algo sólo es necesario editar el archivo en Google Drive y dándole actualizar al blog ya se pueden ver los cambios porque cada vez que carga busca el archivo en Google Drive.

Para editarlos online podés agregar editores,  esto se hace haciendo click en Crear (como si fueras a crear un archivo) y después en Conectar más aplicaciones. Yo estoy usando CSS Editey y Javascript Editey, también hay uno llamado Shift Edit, todavía no lo probé.

Tutorial en inglés