AccueilFAQRechercherMembresGroupesS'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.


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

    Partagez
    avatar
    Onyx
    FémininAge : 24Messages : 3134

    le Mer 24 Aoû 2016 - 1: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 ^^




      La date/heure actuelle est Dim 21 Oct 2018 - 16:42