Ajouter la coloration syntaxique proprement dans Blogger

Si Blogger permet de copier / coller du code dans un article, et d'afficher la coloration syntaxique directement,
le code html généré de l'article n'est pas "propre" : chaque ligne comporte des balises "style" particulières
ajoutées automatiquement pour permettre le rendu du code.

On peut faire mieux en utilisant Highlight.js

Pour ce faire, aller dans Thème dans la barre de menu de gauche (en partant du principe que vous avez déjà choisi un thème),
et cliquer sur "Modifier le code html".
Coller ce code à la fin de la balise "head" :

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/default.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/highlight.min.js"></script> 
<script>hljs.initHighlightingOnLoad();</script> 

Ici le code de highlight est récupéré de cloudflare (qui est un CDN), et il est initialisé par la fonction initHighlightingOnLoad.

Une fois la modification enregistrée, retourner sur l'article et ajouter la balise <pre><code> autour du code :

<pre><code class="javascript">
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

</code></pre>

Et voilà, le code reste clair lisible quand vous relisez le html de l'article !

A noter : cette méthode ne permet pas de résoudre le problème du html qu'il faut toujours encoder par contre.