Inserire il codice nei post su Blogger , HTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<!-- --> <!-- Codice HTML --> <!-- --> <br /> <div style="text-align: justify;"> <span style="font-size: 85%;"> <u>1</u> <br /> <br /> Può capitare di volere postare qualche fatto tecnico ( programmazione ) utile a gestire meglio un blog della piattaforma Blogger ( ed utile, in senso esteso, a conoscere qualcosa del linguaggio basato su marcatori che <i>de facto</i> è lo standard di base del web, l'<b>HTML</b> [ <a href="https://it.wikipedia.org/wiki/HTML" target="_blank">1</a> , <a href="http://www.html.it/" target="_blank">2</a> , <a href="http://www.w3schools.com/html/" target="_blank">3</a> ] ); per spiegarlo ai novizi, oppure per evidenziare alla propria comunità un fatto particolare, un malfunzionamento, altro.<br /> In questi casi, è utile visualizzare all'interno del post uno stralcio o l'intero codice ad esempio, ma c'è un problema : l'editor di Blogger intende i caratteri inclusi tra il segno <i>minore di</i> [ <a href="https://en.wikipedia.org/wiki/Less-than_sign" target="_blank">4</a> ] e il segno <i>maggiore di</i> [ <a href="https://en.wikipedia.org/wiki/Greater-than_sign" target="_blank">5</a> ] come comandi e li esegue come tali; e questo non è un problema che insorge solo nell'uso dell'editor di Blogger, ma in generale in tutti gli editor del web ( blog, siti-web, e-mail ... ).<br /> Per visualizzare correttamente e con chiarezza grafica un codice nell'output dato all'utente, esistono degli strumenti on-line gratuiti come <b>hilite.me</b> di Alexander Kojevnikov [ <a href="http://hilite.me/" target="_blank">6</a> ] : </span> <br /> <br /> <br /> <span style="font-size: 85%;"> <a href="http://www.bufalo70.it/Odb_03/CO/Blogger__HTML__codice_nel_post/CO__Blogger__HTML__codice_nel_post__01__01__hilite_me__0500X.jpg" style="cursor: move;" target="_blank" title="Clicca per l'immagine ingrandita"><img src="http://www.bufalo70.it/Odb_03/CO/Blogger__HTML__codice_nel_post/CO__Blogger__HTML__codice_nel_post__01__01__hilite_me__0500X.jpg" /></a> <br /> <br /><i>L'interfaccia del sito hilite.me, essenziale e funzionale</i>. </span> <br /> <br />

Il codice del primo paragrafo di questo post.

1

Può capitare di volere postare qualche fatto tecnico ( programmazione ) utile a gestire meglio un blog della piattaforma Blogger ( ed utile, in senso esteso, a conoscere qualcosa del linguaggio basato su marcatori che è uno degli standard di base del world wide web, l'HTML [ 1 , 2 , 3 ] ); per spiegarlo ai novizi, oppure per evidenziare alla propria comunità una utilità, un malfunzionamento, altro.
In questi casi, è utile visualizzare all'interno del post uno stralcio o l'intero codice ad esempio, ma c'è un problema : l'editor di Blogger intende i caratteri inclusi tra il segno minore di [ 4 ] e il segno maggiore di [ 5 ] come comandi e li esegue come tali; e questo non è un problema che insorge solo nell'uso dell'editor di Blogger, ma in generale in tutti gli editor del web ( blog, siti-web, e-mail ... ).
Una soluzione, può essere la sostituzione manuale dei caratteri speciali ( come minore di e maggiore di ) con le relative entità ( entity ) [ 6 ] che sono una forma di rappresentazione di tali caratteri ch'è capita e correttamente rappresentata in output dalle diverse piattaforme operative.
{ una tabella di entità e forme è consultabile in WikiBooks : [ 7 ] }.
Si tratta, tuttavia, di un'operazione noiosa, eppoi è opportuno anche staccare visivamente lo spazio dedicato al codice dal resto del post, per evitare confusione e difficoltà di lettura.
Per visualizzare correttamente e con chiarezza grafica un codice nell'output dato all'utente, esistono degli strumenti on-line gratuiti come hilite.me di Alexander Kojevnikov [ 8 ] :




L'interfaccia del sito hilite.me, essenziale e funzionale.

2

L'uso è intuitivo.
Si copia-e-incolla il codice che si vuole spottare nel campo Source code poi si scelgono le opzioni : dai menu a tendina che compaiono cliccando sulle freccine, il linguaggio ( Language, va bene Python ) e la combinazione di colori dell'output ( Style ), cliccando sul quadratino ( il checkbox ) si aggiungono i numeri di linea al listato ( Line numbers ).
Quindi coloro che conoscono già qualcosa di HTML possono intervenire sul foglio di stile incorporato ( CSS ).
Alla fine, si clicca sul bottone Highlight! e nel campo HTML appare il codice da copiare-e-incollare all'interno del codice del proprio post ( pagina-web, e-mail ... ).
In apertura di questo post e nel precedente ( dedicato alla barratura del testo [ 9 ] ) vedete alcuni esempi di codice formattato con hilite.me e visualizzato a schermo.

Siccome – secondo la mia sensibilità – l'inchiostro di default del testo è troppo chiaro, l'ho scurito a #444444 ( un grigio intenso ) [ 10 ] aggiungendo al tag di campo <pre> una specifica di stile :

<pre style="color: #444444; margin: 0; line-height: 125%">

3

Esistono altri strumenti e metodi d'uso per ottenere la visualizzazione del codice nei post, come quello che ho trovato nel CraftyFella's Blog [ 11 ] : il SyntaxHighlighter di Alex Gorbatchev [ 12 , 13 ].
Il codice di questo strumento va implementato nel codice del modello ( template ) che state usando, cui si arriva dalla bacheca ( dashboard ) di Blogger attraverso Modello → Modifica HTML :




Le istruzioni d'uso, le trovate ( in lingua inglese ) nel succitato post di David Craft [ 11 ].