Comme je l’avais récemment expliqué, on peut partager du code sur le net grâce à gist.github, au moyen d’un code embed similaire avec ce qui se fait par exemple chez Youtube quand on veut partager une vidéo. Cette solution est pratique, rapide, mais vous fait dépendre d’un service extérieur, et il n’est nul besoin de redire à quel point ce genre de service peut quelquefois amener de mauvaises surprises en terme de temps de chargement.

J’ai découvert sur les blogs de développeurs que ceux-ci utilisaient un plugin spécial pour partager du code sur WordPress, j’ai nommé SyntaxHighlighter Evolved (que j’abrévierai en SyntaxHighlighter ou SHE). Celui-ci propose d’intégrer du code dans vos pages très simplement (en le mettant entre les balises [ sourcecode language= »css » ][ /sourcecode ] pour le CSS, a adapter en fonction du langage bien sûr).

Contrairement à gist.github, SHE numérote les lignes de code, mais les deux colorent le code de façon tout à fait acceptable. De plus, gist.github fournit le contenu via un fichier JS, ce qui fait que le code n’est pas reconnu comme étant dans la page (pour Google), ce qui est moins bon en terme de référencement. SHE, lui, met le code bien proprement dans la page (plutôt sympa).

Pour l’exportation dans le flux, je note que le script fournit par gist.github ne passe pas via Google Reader (le blog ne s’affiche tout simplement pas), alors que SyntaxHighlighter s’affiche plutôt correctement (simplement, les couleurs disparaissent, et seul reste le formatage en Courrier New, ce qui est déjà pas mal).

Le dernier point (le plus important) sur lequel je voulais comparer les deux solutions était celui du temps de chargement (on ne se refait pas).

Temps de Chargement : gist.github vs SyntaxHighlighter Evolved

Pour gist.github, voilà ce que j’obtiens avec le panel développer de Chrome (le test a été fait avec le billet : « gist.github.com : un service bien pratique pour partager du code source« ) :

Comme on peut le voir, il y a deux fichiers à télécharger pour l’affichage du code. Un Javascript, et une feuille CSS. Si j’additionne les temps de chargement (connexion+chargement) non parallèles, on a un total de (grosso modo, à la louche) 750ms (si vous vous demandez comment j’ai compté, regardez les cases, et voyez que une seconde correspond à 8 cases, alors que gist.github prends en tout 6 cases. Je vous laisse faire la règle de trois).

Pour SHE, j’ai fait le test avec le billet Comparatif entre les fonctions frozenset, set et lambda :

De ce que l’on peut voir (et toujours avec le comptage par cases), le temps de comptage non-parallèle est de 3 cases, soit donc environ 375ms.

Par contre, je ne sais pas s’il est très pertinent de compter en assimilant ce qui s’est fait en parallèle (si on ne comptait pas avec la parallélisation, cela ferait 6 cases pour SHE, et donc un total de 750ms), mais dans tous les cas, SHE semble relativement plus rapide que gisthub, sans pour autant que gisthub ait une lenteur rédhibitoire.

A l’avenir, je continuerai donc d’utiliser SHE, mais je ne recommande pas de quitter gist.gisthub en courant si vous avez l’habitude de l’utiliser : les temps de chargement ne sont pas horrible (300ms, c’est pas la ruine quand on les met en face des 2,3 secondes de Sharethis, ou des 6 secondes de Disqus !).