Comment ajouter des numéros de ligne à une zone de texte HTML ?

Améliorations des numéros de ligne pour la zone de texte HTML

Question : Comment les numéros de ligne peuvent-ils être affichés dans la marge gauche d'un élément ?

Réponse :

Présentation de CodeMirror

CodeMirror est fortement recommandé par les membres de la communauté, un outil puissant qui excelle dans l'affichage de la ligne nombres.

Mise en œuvre

CodeMirror offre une intégration sans effort. Intégrez-le à votre projet en implémentant le code suivant :

var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
    lineNumbers: true,
    mode: 'text/x-perl',
    theme: 'abbott',
});

Dans cet exemple :

• La propriété lineNumbers active la numérotation des lignes.
• mode spécifie la syntaxe mise en évidence pour Perl.
• le thème définit l'apparence de l'éditeur sur "Abbott" style.

Démo

Découvrez une démonstration entièrement fonctionnelle de CodeMirror avec des numéros de ligne dans le bac à sable StackOverflow :

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/perl/perl.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/abbott.min.css">

<textarea>

Considérations supplémentaires

D'autres solutions peuvent rencontrer des problèmes d'alignement des numéros de ligne. Cela est souvent dû aux paramètres DPI du moniteur qui ne sont pas pris en compte. Cependant, CodeMirror gère ces situations efficacement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!