AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -40%
SanDisk Carte microSDXC UHS-I pour Nintendo Switch 128 ...
Voir le deal
25.99 €

    [Astuce] Ajouter des numéros de lignes aux balises code

    Onyx
    Onyx
    FémininAge : 27Messages : 3318

    le Mer 24 Aoû 2016 - 3:45



    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



    Nasträlya
    Nasträlya
    FémininAge : 25Messages : 242

    le Dim 8 Mar 2020 - 18:35

    Merci! Je trouve ça super pratique pour aider les membres qui ont du mal avec le code =)



    :friends:
    [Astuce] Ajouter des numéros de lignes aux balises code 47202010
    Tueuse de yeux de Mère en Fille depuis 1875 :angry:
    Kelalin
    Kelalin
    FémininAge : 28Messages : 2419

    le Dim 8 Mar 2020 - 18:48

    Merci pour le partage ! :)
    Contenu sponsorisé


      La date/heure actuelle est Sam 23 Jan 2021 - 20:47