Come creare uno stile personale per il codice HTML pubblicato nei post.

Come pubblicare codice HTML o di altri linguaggi di programmazione in un post di Blogger in un rettangolo con sfondo, bordo e immagine di background personalizzati.

Recentemente in un commento mi è stato chiesto che sistema uso per pubblicare i codici HTML e di altri linguaggi di programmazione nei post. Da qualche tempo è possibile pubblicare codice HTML nei post senza che Blogger lo interpreti come tale ma lo consideri solo come fosse testo. Questo invece non è ancora possibile per i commenti dove il codice viene ancora interpretato e per postarlo dobbiamo usare un escamotage.

Anche gli utilizzatori di Open Live Writer possono incollare senza difficoltà codice HTML nei post confezionati con questo strumento. Alcuni utenti di Blogger usano la citazione o blockquote per postare il codice in modo da presentarlo graficamente diverso dagli altri contenuti. Tra l'altro il blockquote di Blogger può essere personalizzato. Ci sono però siti che utilizzano la citazione per altre eventualità come per esempio i blog letterari che è meglio distinguano tra codici e altri contenuti.

Una scelta simile l'ho fatta anche io che preferisco inserire il codice in un rettangolo con sfondo di un colore verde che utilizzo nel layout schiarito di alcuni toni con Oto255. Oltre al rettangolo uso anche una immagine di background che indica la paternità dell'autore.

In questo articolo vi proporrò tre metodi di inserimento di codice che potrete personalizzare ulteriormente agendo sui parametri. Con il primo si ottiene questo risultato

che è quello che ho usato come base per lo stile che utilizzo in questo blog. Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la riga <b:skin>. Si clicca sulla freccetta nera posta sulla sinistra per visualizzare tutto il codice. Si cerca con Ctrl+F la riga finale della sezione che è ]]></b:skin> quindi, subito sopra a questa, si incolla

.codice1 {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(https://lh3.googleusercontent.com/-c_i7spoqIQ0/WBB5Ia1kBJI/AAAAAAAA41c/BF159yeZJkwrUrKBsaui62YkY_167k8BACHM/s720/codice-1.gif) no-repeat right bottom;
border : 2px solid #eee;
color : #7D7D7D;
}

Si salva il modello. Quando si vuole pubblicare un codice in un post creato con l'Editor di Blogger o con Open Live Writer lo si incolla su Scrivi quindi si va su HTML e si aggiunge una riga prima del codice e una riga alla fine dello stesso in questo modo

<div class='codice1'>
Codice da visualizzare nel post
</div>

È importante incollare il codice da Scrivi e non da HTML altrimenti verrà interpretato e non considerato come testo. Un altro possibile stile è il seguente

Fermo restando tutto il procedimento precedente stavolta il codice da incollare nel modello è

.codice2 {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(https://lh3.googleusercontent.com/-U6FaWH1xmhI/WBB5IRUm9zI/AAAAAAAA41c/yB9dXvmDS3AVgQUJf-8V0rlXwCm7jlXAgCHM/s720/codice2.gif) no-repeat right bottom;
border : 2px solid #eee;
color : #7D7D7D;
}

mentre il codice va incollato nel post con la stessa modalità ma sostituendo codice1 con codice2.



Infine la terza opzione porterà a questo risultato, con visualizzazione del numero delle righe.



Il codice da incollare nel modello è il seguente

.codice3 {
margin : 10px;
padding: 0px 25px 5px 40px;
background : #ffffff url(https://lh3.googleusercontent.com/-z_ct9vBGS0Y/WBB3zKNNn7I/AAAAAAAA41g/xzeTBCY7O0o5Vph_pOL2wDi_ANO3f4SrQCHM/s720/codice3.png) no-repeat top left;
font: 0.9em Helvetica;
color : #767675;
border: 1px solid #767675;
}

Nel pubblicare il codice nel post va utilizzata la classe codice3 al posto della classe codice1.

PERSONALIZZAZIONI DEGLI STILI DEI CODICI

Demo
Clicca qui

Oltre alla personalizzazione dei codici dei colori anche gli URL diretti delle immagini possono essere sostituiti da quelli di altri sfondi caricati su Google Foto. Ricordo che quando i tag margin e padding hanno un solo valore questo sarà applicato a tutte le direzioni e setteranno rispettivamente le distanze esterne e interne al rettangolo. Se i valori invece sono quattro, il primo darà la distanza nella direzione in alto, il secondo nella direzione verso destra e così via procedendo in senso orario. Nel terzo codice è stata inserita anche una riga per la famiglia dei caratteri che però può essere aggiunta anche negli altri due codici; 0.9em significa che i font presenti nel rettangolo avranno una dimensione del 90% rispetto a quella dei caratteri del post. Infine si possono impostare anche lo stile del bordo,  le sue dimensioni e il suo colore.