5583 sujets

Sémantique web et HTML

Comment démarrer la première ligne de code au numéro 1 ?

Bonjour à vous tous,

J'ai trouvé sur le web du code Javascript permettant d'ajouter automatiquement des numéros aux lignes de code, comme dans les éditeurs de code. J'ai fait du copié/collé du code Javascript et je ne comprends pas pourquoi il m'affiche les deux premières lignes vides (voir capture écran ci-dessous).

upload/1745835030-62242-capturedncran2025-04-28120634.png
Quelqu'un saurait trouver le moyen de démarrer la première ligne de code à la ligne n° 1 ?

Voici le code :
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <title>Code avec numéros de ligne comme dans les éditeurs de code</title>
    <style>
        body {
            font-family: monospace;
        }

        .code-container {
            display: flex;
        }
    </style>
</head>

<body>
    <p>Javascript</p>
    <div class="code-container">
        <div id="lineNumbers"></div>
        <pre>
<code id="code">
    function bonjour() {
        console.log("Bonjour tout le monde !");
    }
            
    bonjour();
</code>
        </pre>
    </div>

    <script>
        const code = document.getElementById('code').textContent;
        const lineNumbers = document.getElementById('lineNumbers');
        const totalLines = code.split('\n').length;

        let linesHtml = '';
        for (let i = 1; i <= totalLines; i++) {
            linesHtml += i + '<br>';
        }
        lineNumbers.innerHTML = linesHtml;
    </script>

</body>

</html>

Merci pour votre aide.
Modifié par ObiJuanKenobi (28 Apr 2025 - 12:18)
Bonjour,
>> Quelqu'un saurait trouver le moyen de démarrer la première ligne de code à la ligne n° 1 ?
Ton texte n'est pas aligné à la ligne 1 car la balise <pre> possède des marges par défaut et tu as un \n pour commencer ton texte dans l'élément id="code".

Il existe des librairies pour faire de la coloration syntaxique, ce qui à mon sens te faciliterait la vie.
https://www.alsacreations.com/astuce/lire/1476-Prism---coloration-syntaxique.html
https://prismjs.com/
https://highlightjs.org/
Modérateur
Salut,

casper2 a écrit :

Ton texte n'est pas aligné à la ligne 1 car la balise <pre> possède des marges par défaut et tu as un \n pour commencer ton texte dans l'élément id="code".

+1

@ObiJuanKenobi : Ta compréhension du DOM n'est pas parfaite Smiley cligne (le ceci explique cela). Je t'invite à consulter cette page de la mdn : element.nodeType (attribut DOM level 1 de mémoire)

niuxe a écrit :

Salut,
Oui c'est ça.
Sache qu'un commentaire html ou un texte ou une ligne vide est aussi notifiée dans le DOM. Si tu utilises en Javascript des méthodes ou un attribut du DOM level 1 et que tu veuilles cibler un élément, tu peux récupérer un objet vide (mais pas undefined ou null). Je pense notamment à firstChild.


Je fais référence à un commentaire que je t'ai rédigé lors d'un d'un sujet que tu as posté sur le forum : Qu'est-ce que le DOM ?

un début de solution ici (J'ai fait ça à l'arrache). Pour une solution plus aboutie, tu vas devoir tricher.
Modifié par niuxe (28 Apr 2025 - 15:10)
niuxe a écrit :
un début de solution ici (J'ai fait ça à l'arrache). Pour une solution plus aboutie, tu vas devoir tricher.


C'est bon, ça marche ! Finalement, tu as surtout remonté la balise <code> de sorte que son retour à la ligne ne soit plus pris en compte. Par contre, le déclage vers la gauche du contenu encapsulé par la balise <code> fait que ce n'est pas "propre". Le code n'est plus aligné avec les bonnes indentations par rapport au code précédent.
Modifié par ObiJuanKenobi (28 Apr 2025 - 15:14)
Modérateur
ObiJuanKenobi a écrit :


C'est bon, ça marche ! Finalement, tu as surtout remonté la balise &lt;code&gt; de sorte que son retour à la ligne ne soit plus pris en compte et tu as modifié aussi le code Javascript. Malheureusement pour moi, je ne suis pas encore capable d'intervenir dans le code Javascript, étant donné que je débute avec ce code.


Je viens de modifier ma réponse précédente afin que ce soit au plus juste. Tout le monde a commencé un jour. Que tu laisses des sujets sur le forum afin d'apprendre et de comprendre, c'est le but de ce forum. Chaque membre peut intervenir sur un sujet et être pertinent dans sa réponse même avec peu de connaissances.

ObiJuanKenobi a écrit :
tu as modifié aussi le code Javascript.

pas du tout. J'ai modifié le html et le css.
niuxe a écrit :
pas du tout. J'ai modifié le html et le css.


En effet, je viens de voir en détail dans le CSS que tu as annulé les marges dans la classe ".code-container" pour remonter les deux premières lignes.
Prévenir un modérateur
Répondre au sujet
Aller à