Wie füge ich mit CodeMirror Zeilennummern zu einem HTML-Textbereich hinzu?

So fügen Sie Zeilennummern zum HTML-Textbereich hinzu

In dieser StackOverflow-Diskussion suchte ein Benutzer nach einer Lösung zum Hinzufügen von Zeilennummern zum Linker Rand eines Textbereichselements. Der Benutzer hat den folgenden Codeausschnitt bereitgestellt:

<TEXTAREA name="program">

Während die empfohlene CodeMirror-Bibliothek eine effektive Lösung bietet, stellt sich die Frage nach ihren technischen Details.

CodeMirror: Ein leistungsstarker Text Editor

CodeMirror ist ein vielseitiger Texteditor, der sich nahtlos in Webanwendungen integriert. Um es in Ihren Textbereich einzubinden, befolgen Sie einfach diese Schritte:

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

Dieses Snippet initialisiert eine CodeMirror-Instanz innerhalb des Elements mit der ID „code“. Die Option „lineNumbers“ ermöglicht die Anzeige von Zeilennummern, und die Optionen „mode“ und „theme“ passen die Codehervorhebung bzw. das Thema an.

Demo und Dokumentation

Eine funktionierende Demonstration finden Sie im folgenden Snippet:

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>

Weitere Details und Erweiterte Anpassungsoptionen finden Sie in der umfassenden Dokumentation unter https://codemirror.net/doc/.

Das obige ist der detaillierte Inhalt vonWie füge ich mit CodeMirror Zeilennummern zu einem HTML-Textbereich hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!