Comment afficher du code HTML dans un article de Blogger.

Le Problème
Comment intégrer du texte/code html dans vos articles  pour qu’il soit à la fois visible par les visiteurs et qu’ils puissent le copier et l’utiliser facilement.
                                               
Ex code :

<a href="http://blogavecblogger.blogspot.fr/">BlogavecBlogger</a>    

Après avoir publié le message le résultat suivant s'affiche:

BlogavecBlogger

En fait, le navigateur a interprété le code HTML comme une commande et l'a exécuté.

Désormais avec le nouveau Blogger de2020, il existe une nouvelle possibilité

Solution 1  ; l'outil du nouveau BloggerDans la barre d'outils existe désormais :




il suffit de taper/coller le code puis le sélectionner  et indiquer "Mettre en forme comme  code"

Ci -après, copie écran : ligne 1 en forme de code, ligne 2 normale

le code html correspondant est :

La balise pre signifie littéralement "texte pré-formaté", sans dire autre chose sur le texte à l'intérieur de cette balise. Dans une balise <pre>, le texte est affiché avec une police à largeur fixe (généralement Courier), et cette balise préserve les espaces et les sauts de ligne.
Cette balise est souvent utilisée pour éditer du code informatique ou pour éditer du texte avec une mise en forme inhabituelle.

Le code est donc bien  présenté en tant qu "texte", toutefois, il n'est pas spécifiquement mis en valeur, aussi nous préférons les solutions ci après

Solution 2 : la balise  <textarea>
balise spécifique d'un formulaire détournées pour afficher,  par exemple, du code HTML par un copier-coller. Balise prise en charge par tous les principaux navigateurs.Il faudra travailler en mode HTML ( y compris le code  à coller en mode html)
Exemple1
<textarea>tout le  code HTML a afficher</textarea>
ce qui affiche:

tout le code HTML a afficher


Précisions:  Détails sur la balise textarea  ou ici

1. Dans un textarea,, le texte est obligatoirement affiché dans une fonte fixe ( Courrier new, par exemple ) même si la police courante est Arial ou Verdana
2. rows="..." : hauteur en nombre de lignes         rows="20"
   cols="...' :  largeur en nombre de caractères    cols="100"
3. Comme 1 caractère fixe = 8 pixels donc dans 800 pixels on peut afficher ( 800:8 ) -> 100 caractères, sur une ligne. ( ou 100 caractères = 800 pixels )

Exemple  2 avec  taille :

A vous d'optimiser la taille ex   <textarea cols="100" rows="20">

Ci -dessous avec :
<textarea rows="40" cols="100">
tout le code HTML à afficher
</textarea>



tout le code HTML à afficher



Solution 3

utiliser ce cadre pour insérer votre code (faire un copier coller puis insérer votre code html )
si nécessaire Voir notre article dédié aux cadres :
                                             
Ex code :

<a href="http://blogavecblogger.blogspot.fr/">BlogavecBlogger</a>    

CODE A INSERER

<blockquote style="border: 1px solid rgb(241, 241, 241); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px; font-family: verdana; font-size: 12px; line-height: 20px; margin: 10px; outline: 0px; padding: 10px; vertical-align: baseline;">
<span style="color: blue;">votre texte</span></blockquote>

Le même, neutre
Utiliser ce code

<blockquote style="border: 1px solid rgb(241, 241, 241); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px; ; font-size: 12px; line-height: 20px; margin: 10px; outline: 0px; padding: 10px; vertical-align: baseline;">

<span >votre texte</span></blockquote>

Le résultat

votre texte

Solution 3 

Pour écrire un code html afin qu' qu’il s’affiche tel quel, l'astuce est de remplacer le symbole
  < par &lt;
et
 > par &gt;

Vous pouvez utiliser votre Bloc-notes Windows et utiliser  Ctrl + H  pour  remplacer automatiquement les deux symbole dans l’ensemble du code.

Autre solution : Avec le Site internet Postable il suffit de copier/coller le code HTML que vous voulez afficher et Postable va remplacer tout les symboles < et > automatiquement.