Blogger - Aggiungere un code snippet

Blogger - Aggiungere un code snippet per visualizzare la sintassi del codice all'interno dei post

Introduzione

Di seguito spiegerò come aggiungere all'interno del nostro blog un box dove potremo far visualizzare del codice in diversi linguaggi di programmazione con sintassi evidenziata e numero di righe.
Per fare questo, utilizzeremo SyntaxHighlighter, una libreria javascript.

Preparazione

Prima di tutto dobbiamo indicare gli stili e i javascript che ci permetteranno di elaborare il codice all'interno del nostro post (o pagina web) all'inizio del caricamento della pagina in modo che il codice che andremo ad inserire sia riconosciuto dallo script e visualizzato correttamente.

Dobbiamo fare riferimento alle librerie specifiche per ogni linguaggio che vorremo utilizzare (possibilmente solo quelle che pensiamo ci possano interessare)
Per maggiori informazioni fare riferimento ai seguenti link:

SyntaxHighlighter_Home  Sito ufficiale
SyntaxHighlighter_GitHub  Sito del progetto su GitHub
SyntaxHighlighter_CDN CDN repository da utilizzare per dichiararli all'interno del nostro sito.

Andare sulla gestione del tema di Blogger e cliccare su Modifica HTML.
Fare un backup (copia e incolla da altra parte) di tutto il codice della versione attuale (nel caso qualcosa andasse male).
Aggiungere il seguente codice prima della chiusura del tag </head> (vale anche per un sito classico)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css" integrity="sha256-x/w94VndJQr7PoDeh6V07DPevWyTk2CvXuDn8PD/dXg=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css" integrity="sha256-j4kt570/QlhwKOmo3dnQHGkj85R+ZXcQ70CiQH5xjeY=" crossorigin="anonymous" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js" integrity="sha256-L22W5IC7Eyudi+0xlvEJzeDfXk+sC8kdYet7MV9Gmcg=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.min.js" integrity="sha256-xtxi8ej6ImD1ERbXoz/4ymfsYXa9ldBy9h9fpBOmfB0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.min.js" integrity="sha256-5wa+3mL6mXb4sWV/uYQaFU7xDzAuo4VPvNGOTtWNc78=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js" integrity="sha256-Mzo5DX3TG0ajcrjt9RT8s5dDAeDjmldwXR104getEWc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js" integrity="sha256-WIABnTbKZS1qDHfcj9fdrV9WK7V1YmJmWmYGjrt3x+4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js" integrity="sha256-+heouzbjtT7DtVsUFGPPqm4DbPEMDaz30YH8qDppdPQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.min.js" integrity="sha256-0AUqNUNKNwZfOWZPUpKouFr4KVVUMabUbhtQOTH0Omg=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSql.min.js" integrity="sha256-b9KmzJmmxSrm/it6pZ+NQYc/XVmmBvPcH/TzzhfWzAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushVb.min.js" integrity="sha256-GZPqLkJhFNSWdyVeZiCsgKFTQBO2F4lev8jj1Tz4OKU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js" integrity="sha256-Fzv8td+qwhvqvelJUao/fFIcKNOGgKnd0weCJxY7Eos=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.js" integrity="sha256-CEEpWn4j2rx3xt613A0Q6JqB2zTBJfXErK/70t7T694=" crossorigin="anonymous"></script>
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

Salvare il tema per applicare le modifiche.

Come inserire il code snippet per la visualizzazione del codice

Ora scriviamo il nostro primo post ed individuiamo il punto in cui vorremmo far visualizzare il codice. Sopratutto se il post è un po' lungo, il consiglio è di scrivere qualcosa di facilmente riconoscibile nell'editor per identificare poi il punto esatto dalla vista HTML, un placeholder inequivocabile.
Ci sono due possibilità per inserire il codice, utilizzare il tag script formattato come segue o utilizzare il tag pre raffigurato successivamente.
Dalla vista HTML individuare e sostituire la parola scelta con il codie seguente..

tag script

<script type="text/syntaxhighlighter" class="brush: js"><![CDATA[
function hello(){
    alert( 'Hello, world!' );
};
]]></script>

tag pre

<pre class="brush: php; html-script: true;">
<script>
    alert( 'Hello, world!' );
  </script>
</pre>

Nel primo caso (script) possiamo inserire il codice direttamente dalla vista HTML ma c'è un problema se includi un tag di script di chiusura, ad esempio </script>, anche all'interno del blocco CDATA, la maggior parte dei browser chiude in modo errato e  prematuro non visualizzandolo anche se fa parte ned codice da vidualizzare..
Per il secondo caso (pre) invece sarà necessario codificare il codice in formato HTML trasformando così tutti i simboli come fa anche l'editor di Blogger. È consigliato però non fare uso di quest'ultimo evitando di fare avanti e indietro dalle viste. Sarà sufficiente utilizzare uno dei tantissimi HTML Encoder che trovate in rete.
Ne suggerisco un paio per velocizzare la vostra voglia di provare subito ..

• opinionatedgeek
• string-functions

Attenzione a indicare correttamente il linguaggio che andrete ad inserire e quindi da interpretare.
È importante se sia presente il codice corrispettivo all'interno del tag </head> come indicato in precedenza e nel tag utilizzato per incorporare il codice che vogliamo visualizzare.
Entrambi i metodi infatti, utilizzano l'attributo class per passare le informazioni al parser che si occuperà di visualizzarci il codice in maniera più leggibile ( class="brush: html")
Sono tantissimi i linguaggi supportati e la comunity si occupa di aggiornarli e di aggiungerli, di seguito una lista di esempio:

• actionscript3
• bash, shell
• c-sharp, csharp
• cpp, c
• css     
• delphi, pas, pascal
• diff, patch
• groovy 
• js, jscript, javascript
• java
• jfx, javafx
• perl, pl
• php 
• plain, text
• ps, powershell 
• py, python
• rails, ror, ruby
• scala
• sql
• vb, vbnet
• xml, xhtml, xslt, html, xhtml 

Ora potete fare le vostre prove e pubblicare il vostro codice.
Ci sono ancora molte cose che sarebbero da dire su questo argomento ma per approfondimenti come cambiare lo stile o conoscere ed eventualmente come superare alcuni bug ti rimando ai siti ufficiali che linko qua sotto.
Linguaggi e temi per utilizzare al meglio SyntaxHighlighter