How to Add Line Numbers to a HTML Textarea?

Displaying Line Numbers in a HTML Textarea

When working with a <textarea> element, it can be beneficial to display line numbers along its left margin for enhanced code readability and debugging.

CodeMirror as a Solution

CodeMirror is a powerful code editor library that can be leveraged to add line numbers to a <textarea>. Its extensive documentation provides detailed guidance for its implementation.

Implementation Demo

A fully functional demo can be found in the StackOverflow sandbox:

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

Additional Resources

For further assistance and customization options, refer to the following resources:

• CodeMirror Documentation: https://codemirror.net/doc/
• CSS for CodeMirror: https://codemirror.net/doc/manual.html#styling

The above is the detailed content of How to Add Line Numbers to a HTML Textarea?. For more information, please follow other related articles on the PHP Chinese website!