SyntaxHighlighter et Blogger

Après quelques posts sur ce blog, la question se pose sur le formatage du code publié. Comment formater mon code source dans Blogger, si possible avec des barres de défilements ?

Après quelques recherches, je trouve deux outils ayant un mode pour Clojure : SyntaxHighlighter et prettify. Le premier a l'avantage de permettre l'affichage des barres de défilements.

Comment j'ai intégré SyntaxHighlighter à Blogger :

• les liens css, le code custom css et les liens javascripts ont été ajoutés à la fin de la section Header du modèle.

<!-- ctu custom -->
<!-- ctu 1. syntaxhighlighter -->
<!-- ctu 1.1 css --> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<!-- ctu 1.2 css custom code --> 
<style type='text/css'>
 .syntaxhighlighter { padding-bottom: 3px !important; } <!-- fix unwanted vertical scrollbar -->
</style>
<!-- ctu 1.3 javascript links-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> 
<!-- ctu 1.4 javascript scripts in syntaxhighlighter gadget -->

Remarquez le custom css (ligne 8) qui évite à certains navigateurs d'afficher une barre de défilement verticale inutile. Je détaillerai ce point plus bas.
Ne pas oublier que le nom d'une classe en css peut s'avérer sensible à la casse. ".syntaxHighlighter" n'était pas pris en compte sous blogger/chrome mais l'était dans un fichier local de test !

• le code javascript est quant à lui dans un gadget standard de type Html/Javascript ajouté au modèle. Le code Javascript peut y être copié sans échappement des caractères spéciaux.

<!-- .css & .js links are put at the end of the header section -->

<script language='javascript'> 
<!-- debut shBrushClojure.js. To remove when present in current distribution -->
 SyntaxHighlighter.brushes.Clojure = function() { /*...*/ }
 SyntaxHighlighter.brushes.Clojure.prototype = new SyntaxHighlighter.Highlighter();
 SyntaxHighlighter.brushes.Clojure.aliases   = ['clojure', 'Clojure', 'clj'];
<!-- fin shBrushClojure.js -->
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

• Il suffit alors d'encapsuler le code à formater dans un tag <pre class="brush: xml"> par exemple.

Pour aller plus loin, on pourra customiser les thèmes et le "clojure.js" sur la détection des mots clef.

[syntaxhighlighter scrollbar issue solved]
Concernant les barres de défilement, il faut donc rajouter le code ci-dessous sinon certains navigateurs web (au moins chrome) font apparaître une barre de défilement verticale superflue.

<!-- ctu 1.2 css custom code --> 
<style type='text/css'>
 .syntaxhighlighter { padding-bottom: 3px !important; } <!-- fix unwanted vertical scrollbar -->
</style>

Certains sites recommandent un padding de 1px. Après tests à l'aide de chrome inspector (click droit-inspecter sur une page web à partir du navigateur Chrome), il s'avère qu'une valeur de 1px est suffisante pour une police de taille <= 12px. Pour une taille <= 54 px, il faut un padding de 2px. La valeur 3px permet d'être ok pour une police <= 88 px !
Je pense que le problème vient du navigateur mais je n'ai pas le temps de trouver un cas simple confirmant cette hypothèse.