The development is moving by leaps and bounds, nowadays you have at your fingertips cloud based IDEs that allow you to work from wherever you are. The most important component of these services, is the code editor. Yeah, that box where you edit your code and it get's highlighted with fancy colors, an autocomplete and other things that (maybe) will help you to work faster.
EditArea is developed by Christophe Dolivet and is currently released under the "LGPL", "Apache" and "BSD" licenses (use the one you want), read the licenses agreement for details.
- Easy to integrate, only one script include and one function call
- Tabulation support (allow to write well formated source code)
- Word-wrap support
- Search and replace (with regexp)
- Auto-indenting new lines
- Line numerotation
- Multilanguage support (currently: Croatian, Czech, Danish, Dutch, English, Esperanto, French, German, Italian, Japanese, Macedonian, Polish, Portuguese, Russian, Slovak, Spanish, and probably more...)
- Possible PHP gzip compression (compress the core files to one file of ~25Ko)
- Allow multiple instances
- Full screen mode
- Possible plugin integration
- Possible save and load callback functions
- Possible dynamic content management
- Can work in the same environment than "prototype" and "mootools"'s like libraries.
- automatic focus on the textarea on page load.
- only on syntax language at the same time (no html and php syntax highlight at the same time).
CodeFlask.js lets you easily and effortless put an code-editor to your web page. It was made as an attempt to create a leaner editor for simple purposes. Just a few lines of code and you're ready to play with code in the browser. If you want a robust web code editor you can check projects that aim that big, such as CodeMirror.
In order to use CodeFlask.js you need also import Prism.js (for code highlight) into your project. Prism basically uses two files, an
.js file and an
.css one (where you can theme the code syntax).
The Monaco Editor is the code editor that powers VS Code, it is licensed under the MIT License and supports IE 9/10/11, Edge, Chrome, Firefox, Safari and Opera. The Monaco editor is not supported in mobile browsers or mobile web frameworks.
Out of the box, monaco has an useful side by side live comparison implementation that supports all languages:
- Support for over 100 languages out of the box
- A powerful, composable language mode system
- Autocompletion (XML)
- Code folding
- Configurable keybindings
- Vim, Emacs, and Sublime Text bindings
- Search and replace interface
- Bracket and tag matching
- Support for split views
- Linter integration
- Mixing font sizes and styles
- Various themes
- Able to resize to fit content
- Inline and block widgets
- Programmable gutters
- Making ranges of text styled, read-only, or atomic
- Bi-directional text support
1. ACE Editor
Features of Ace editor:
- Syntax highlighting for over 110 languages (TextMate/Sublime Text.tmlanguage files can be imported)
- Over 20 themes (TextMate/Sublime Text .tmtheme files can be imported)
- Automatic indent and outdent
- An optional command line
- Handles huge documents (four million lines seems to be the limit!)
- Fully customizable key bindings including vim and Emacs modes
- Search and replace with regular expressions
- Highlight matching parentheses
- Toggle between soft tabs and real tabs
- Displays hidden characters
- Drag and drop text using the mouse
- Line wrapping
- Code folding
- Multiple cursors and selections
- Cut, copy, and paste functionality
Additional usage information, including events to listen to and extending syntax highlighters, can be found on the main Ace website.
Codejar is an embeddable code editor for the browser. This plugin features:
- Lightweight (2 kB only)
- Preserves indentation on a new line
- Adds closing brackets, quotes
- Indents line with the Tab key
- Supports undo/redo
If you think we've forgotten another awesome code editor plugin, please share it with the community in the comment box. Happy coding !