JavaScript : pre2ol.js - présentez lisiblement vos lignes de code.
Par Osku le lundi 27 août 2007, 10:33 - JavaScript - Lien permanent
Olivier a écrit - il y a un petit moment - une classe JavaScript qui permet de transformer tous les blocs préformattés en listes ordonnées.
Avant
<pre>
bla
bla
</pre>
Après
<ol class="pre2ol">
<li class="lizebra">bla</li>
<li class=>bla</li>
</ol>
Ainsi, les ascenseurs horizontaux qui apparaissent dans les blocs de code disparaissent et les lignes de codes sont complètement visibles au premier coup d'oeil :-).
J'ai juste complété avec une bidouille pour y intégrer une minuscule fonction de "zébrage": une classe CSS .lizebra est ajoutée aux éléments impairs de la liste ordonnée.
Note: Si vous ne voulez pas avoir une ligne en trop dans votre liste ordonnée, il faut supprimer le dernier retour à la ligne dans l'espace préformatté.
Guillaume me demandait comment j'obtenais la numérotation des lignes de code : c'est donc gràce à cette classe JavaScript.
Mise en oeuvre :
Insérer ce bout de code dans votre _head.html :
<script type="text/javascript" src="{{tpl:BlogThemeURL}}/js/pre2ol.js"></script>
(J'imagine que comme moi vous avez déposé le fichier pre2ol.js disponible en annexe dans un sous-répertoire js de votre thème)
Quelques règles css qui vont bien :
Ce sont celles qui sont utilisées dans le thème Wsuper :
ol.pre2ol {
line-height:110%;
font-family:monospace;
font-size:110%;
padding-left : 34px;
margin-left : 10px;
list-style:decimal-leading-zero;
border: 1px solid #416FB2;
background:#fff;
}
ol.pre2ol li {
margin : 1px;
border-left: 1px solid #fff;
background-color:#DFECFF;
color:#222;
padding:3px;
}
ol.pre2ol li.lizebra{
background-color:#EFF6FF;
}
ol.pre2ol span {
color:#444;
font-family:"Luxi Sans","liberation mono",monospace;;
}
News du 25/02/2008
Le script est compatible avec tous les effets lightbox, litebox et compagnie. (Merci Sacha).
Mes thèmes ne sont pas forcément à jour.
Commentaires
merci Osku pour les explications,
j'implémente ça dès que je trouve 2 minutes
Je t'en prie, si ça peut te servir
C'est effectivement très chouette comme rendu. Le seul point qui me gêne un peu est que les numéros de ligne sont copiés avec le code ce qui rend compliqué son utilisation.
Effectivement, c'est un des inconvénients des <ol>, l'idéal est que je proposte la pièce jointe le cas échéant.. ou proposer de désactiver le javascript... ou encore un bon éditeur qui gère le mode "colonne"...