How do I add line numbers to an HTML textarea using CodeMirror?

How to Add Line Numbers to HTML Textarea

In this StackOverflow discussion, a user sought a solution for adding line numbers to the left margin of a textarea element. The user provided the following code snippet:

<textarea name="program"></textarea>

While the recommended CodeMirror library offers an effective solution, the question arises about its technical details.

CodeMirror: A Powerful Text Editor

CodeMirror is a versatile text editor that seamlessly integrates into web applications. To incorporate it into your textarea, simply follow these steps:

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

This snippet initializes a CodeMirror instance within the element with ID "code." The "lineNumbers" option enables line number display, and the "mode" and "theme" options customize the code highlighting and theme, respectively.

Demo and Documentation

For a working demonstration, refer to the following 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></textarea>

For further details and advanced customization options, explore the comprehensive documentation at https://codemirror.net/doc/.

The above is the detailed content of How do I add line numbers to an HTML textarea using CodeMirror?. For more information, please follow other related articles on the PHP Chinese website!