Comment ajouter des numéros de ligne à une zone de texte HTML à l'aide de CodeMirror ?

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

Dans cette discussion StackOverflow, un utilisateur a recherché une solution pour ajouter des numéros de ligne au marge gauche d’un élément textarea. L'utilisateur a fourni l'extrait de code suivant :

<TEXTAREA name="program">

Bien que la bibliothèque CodeMirror recommandée offre une solution efficace, la question se pose quant à ses détails techniques.

CodeMirror : un texte puissant Editor

CodeMirror est un éditeur de texte polyvalent qui s'intègre de manière transparente aux applications Web. Pour l'incorporer dans votre zone de texte, suivez simplement ces étapes :

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

Cet extrait initialise une instance CodeMirror dans l'élément avec l'ID "code". L'option "lineNumbers" permet d'afficher le numéro de ligne, et les options "mode" et "thème" personnalisent respectivement la mise en surbrillance du code et le thème.

Démo et documentation

Pour une démonstration fonctionnelle, reportez-vous à l'extrait suivant :

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

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

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

<textarea>

Pour plus de détails et des options de personnalisation avancées, explorez la documentation complète sur https://codemirror.net/doc/.

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!