codemirror

Syntax highlighting

This feature allows for syntax highlighting of code written in various programming languages. The example code initializes a CodeMirror instance with JavaScript syntax highlighting.

var editor = CodeMirror.fromTextArea(document.getElementById('code'), {mode: 'javascript'});

Code editing

CodeMirror provides a rich text editor for code, with features like auto-indentation, line numbers, and bracket matching. The example code creates an editor instance with some JavaScript code pre-filled.

var editor = CodeMirror(document.body, {value: 'function myScript(){return 100;}', mode: 'javascript'});

Autocompletion

Autocompletion can be enabled to suggest completions for the current token. The example code sets up an event listener to trigger autocompletion on certain inputs.

editor.on('inputRead', function onChange(editor, input) { if (input.text[0] === ';' || input.text[0] === ' ') { return; } CodeMirror.commands.autocomplete(editor); });

Themes

CodeMirror supports various themes to customize the appearance of the editor. The example code initializes a CodeMirror instance with the Monokai theme.

var editor = CodeMirror.fromTextArea(document.getElementById('code'), {mode: 'javascript', theme: 'monokai'});

Addons

CodeMirror has a variety of addons that can extend its functionality, such as displaying line numbers or matching brackets. The example code enables line numbers and bracket matching for the editor.

var editor = CodeMirror.fromTextArea(document.getElementById('code'), {mode: 'javascript', lineNumbers: true, matchBrackets: true});