Ajouter des numéros de lignes aux balises code
Salut !
Voici une astuce qui vous permettra de rajouter des numéros de lignes à vos balises codes que j'ai créée suite à la demande de Whitemoon.
Pour voir l'aperçu du résultat : cliquez ici.
L'aperçu a été pris sur phpBB2. Ce LS fonctionne sous toutes les versions, mais le rendu sera différent selon la version de votre forum.
Ce LS est en deux parties.
- Tout d'abord, nous allons ajouter le javascript qui calcule et ajoute les lignes.
- Puis, nous allons ajouter un peu de CSS pour que cela s'affiche correctement.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
1. Le javascript
Vous devez aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT
Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.
Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Numérotation des codes".
On choisit le placement "Sur les sujets".
Enfin, on met le javascript suivant et on enregistre :
- Version phpBB2:
- Code:
$(function() {
var bloccode = $('.cont_code');
if (bloccode.length > 0) {
$(bloccode).each(function() {
var divincode = $(this).wrapInner('<div>').children();
var blochauteur = divincode.height();
divincode.replaceWith(divincode.html());
var lignehauteur = parseInt($(this).css('line-height'));
var nblignes = blochauteur / lignehauteur;
var bloclignes = '<span class="bloclignes"></span>';
$(this).prepend(bloclignes);
for (i = 1; i <= nblignes; i++) {
if (i < 2) {
$(this).find('.bloclignes').append(i);
}
else {
$(this).find('.bloclignes').append('<br />'+i);
}
}
var thispadtop = $(this).css('padding-top');
var thispadbottom = $(this).css('padding-bottom');
$(this).find('.bloclignes').css('padding-top', thispadtop).css('padding-bottom', thispadbottom);
});
}
});
- Version phpBB3:
- Code:
$(function() {
var bloccode = $('code');
if (bloccode.length > 0) {
$(bloccode).each(function() {
var divincode = $(this).wrapInner('<div>').children();
var blochauteur = divincode.height();
divincode.replaceWith(divincode.html());
var lignehauteur = parseInt($(this).css('line-height'));
var nblignes = blochauteur / lignehauteur;
var bloclignes = '<span class="bloclignes"></span>';
$(this).prepend(bloclignes);
for (i = 1; i <= nblignes; i++) {
if (i < 2) {
$(this).find('.bloclignes').append(i);
}
else {
$(this).find('.bloclignes').append('<br />'+i);
}
}
var thispadtop = $(this).css('padding-top');
var thispadbottom = $(this).css('padding-bottom');
$(this).find('.bloclignes').css('padding-top', thispadtop).css('padding-bottom', thispadbottom);
});
}
});
- Version PunBB:
- Code:
$(function() {
var bloccode = $('.cont_code');
if (bloccode.length > 0) {
$(bloccode).each(function() {
var divincode = $(this).wrapInner('<div>').children();
var blochauteur = divincode.height();
divincode.replaceWith(divincode.html());
var lignehauteur = parseInt($(this).css('line-height'));
var nblignes = blochauteur / lignehauteur;
var bloclignes = '<span class="bloclignes"></span>';
$(this).prepend(bloclignes);
for (i = 1; i <= nblignes; i++) {
if (i < 2) {
$(this).find('.bloclignes').append(i);
}
else {
$(this).find('.bloclignes').append('<br />'+i);
}
}
var thispadtop = $(this).css('padding-top');
var thispadbottom = $(this).css('padding-bottom');
$(this).find('.bloclignes').css('padding-top', thispadtop).css('padding-bottom', thispadbottom);
});
}
});
- Version Invision:
- Code:
$(function() {
var bloccode = $('code');
if (bloccode.length > 0) {
$(bloccode).each(function() {
var divincode = $(this).wrapInner('<div>').children();
var blochauteur = divincode.height();
divincode.replaceWith(divincode.html());
var lignehauteur = parseInt($(this).css('line-height'));
var nblignes = blochauteur / lignehauteur;
var bloclignes = '<span class="bloclignes"></span>';
$(this).prepend(bloclignes);
for (i = 1; i <= nblignes; i++) {
if (i < 2) {
$(this).find('.bloclignes').append(i);
}
else {
$(this).find('.bloclignes').append('<br />'+i);
}
}
var thispadtop = $(this).css('padding-top');
var thispadbottom = $(this).css('padding-bottom');
$(this).find('.bloclignes').css('padding-top', thispadtop).css('padding-bottom', thispadbottom);
});
}
});
2. Positionnement (CSS)
Pour arranger le positionnement des lignes, on doit ensuite rajouter du CSS.
Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS
Puis, nous allons ajouter le CSS suivant :
- Version phpBB2:
- Code:
.cont_code {
display: block;
position: relative;
padding-left: 28px;
}
.bloclignes {
position: absolute;
width: 24px;
top: 0px;
left: 0px;
padding-right: 2px;
background-color: #dfdfdf;
color: #757575;
text-align: right;
}
- Version phpBB3:
- Code:
code {
display: block;
position: relative;
padding-left: 29px;
}
.bloclignes {
position: absolute;
width: 24px;
top: 0px;
left: 0px;
padding-right: 2px;
background-color: transparent;
border-right: 1px solid #cccccc;
color: #757575;
text-align: right;
}
- Version PunBB:
- Code:
.cont_code {
display: block;
position: relative;
padding-left: 29px!important;
}
.bloclignes {
position: absolute;
width: 24px;
top: 0px;
left: 0px;
padding-right: 2px;
background-color: transparent;
border-right: 1px dotted #dddddd;
color: #757575;
text-align: right;
}
- Version Invision:
- Code:
code {
display: block;
position: relative;
padding-left: 28px;
}
.bloclignes {
position: absolute;
width: 24px;
top: 0px;
left: 0px;
padding-right: 2px;
background-color: #dfdfdf;
color: #757575;
text-align: right;
}
C'est tout! Si jamais vous avez des problèmes avec cette astuce, n'hésitez pas à passer dans Un problème avec mon code.
À plus ^^
Dernière édition par Onyx le Jeu 25 Juin 2020 - 18:16, édité 1 fois
♫ ![[Astuce] Ajouter des numéros de lignes aux balises code 47202010](https://i.servimg.com/u/f58/15/45/50/66/47202010.png)
