Transform a textarea into a code editor with syntax highlighting and shortcut key support.
Live Demo: http://textarea-syntax.adriancs.com/
Syntax highlighting is accomplished using highlight.js.
The shortcut keys are implemented by adding a JavaScript event listener for input on the textarea, and using a collection of JavaScript code to enable the following shortcut keys:
- When [Enter] is hit, maintain indentation of the previous line
- Press [Tab] for indentation at the current position
- Press [Shift]+[Tab] to decrease indentation at the current position
- Press [Tab] / [Shift]+[Tab] for multiline indentation
- Press [Shift]+[Del]/[Backspace] to delete the entire line
- Press [Home] to move the cursor to the front of the first non-white space character
The following articles provide a walkthrough (step by step explanation) of the code behind the syntax highlighting and shortcut key features:
Documentation:
- https://adriancs.com/html-css-js/1015/syntax-highlightning-in-textarea-html/
- https://www.codeproject.com/Articles/5361561/Syntax-Highlightning-for-Textarea-HTML
Cheers and happy coding.