Code Is Poetry : 20 Top Browser Based Rich Online Code Editors

Practical Code Editors

Highlighting your code is one strategy to improve the readability and context of your text or code; especially for code which spans several pages. The end user can easily ignore large sections of comments or code, depending on what they desire.

Code highlighting also helps programmers find errors within their program. For example, most editors highlight string literals in a different color. Consequently, spotting a missing delimiter becomes much easier because of the contrasting color of the text.

Brace matching is another important feature with many popular editors. This makes it simple to see if a brace has been left out or locate the match of the brace the cursor is on by highlighting the pair in a different color.

Some text editors can also export the color markup in a format that is suitable for printing or for importing into word-processing or other kinds of text-formatting software; for instance an HTML, colorized LaTeX, PostScript or RTF version of its syntax highlighting.

code editors

Syntax Elements

Most editors with syntax highlighting allow different colors and text styles to be given to dozens of different lexical sub-elements of syntax. These include keywords, comments, control-flow statements, variables, and other elements. Programmers often heavily customize their settings in an attempt to show as much useful information as possible without making the code difficult to read.

Some popular syntax highlighting engines

  • vi IMproved syntax files (.vim)
  • GeSHi written in PHP
  • Kate syntax highlighting system (has also been ported to Perl)
  • TextMate syntax files (has also been ported to Ruby)

Online In The Browser Code Editors

Online or web-based Integrated Development Environments (IDE), offer and provide a rich text editing alternative compared to Syntax Highlighter Editors which must be implemented within ones Theme via plugin or manual coding.

These online applications – are available online and allow you to practically develop virtually in ” real time ” any type of web work, by allowing you to work in a simple and comfortable way with hypertext and style languages ​​like HTML, CSS, Script, JavaScript, PHP, and frameworks like Motools or jQuery, which allow users to execute code.

In addition, many of these Online Code Editors will allow you to sign in in order to store and manage your files, and several of them offer interesting forms of collaborative coding.

Featured below are 20 Online Code Editors which will allow you to easily post syntax-highlighted code to your site without having to escape the code or anything.

For a complete list of supported languages please refer to the WordPress Documentation.

1. Compilr

Compilr is an online compiler and online IDE that enables you to work with PHP, C, C++, Ruby and compiler for Java, C# and and the XNA platform from almost any web browser.

2. Dabblet

Dabblet is an interactive CSS playground and code sharing tool developed by Lea Verou. Dabblet saves to Github gists and offers many conveniences for CSS editing. It quickly tests snippets of CSS and HTML code and uses -prefix-free, so that you won’t have to add any prefixes in your CSS code.



4. Thimble, by Mozilla

Thimble allows you to create your own web pages. Write and edit HTML and CSS right in your browser. Instantly preview your work. Then host and share your finished pages with a single click.

5. Jsfiddle

JsFiddle is a playground for web developers, a tool which serves many puproposes, one can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc. Using this approach, JavaScript developers can very easily isolate bugs.

6. CodeMirror

CodeMirror is a JavaScript component that provides a code editor in the browser. When a mode is available for the language you are coding in, it will color your code, and optionally help with indentation.

7. eXo Cloude IDE

eXo Cloud IDE is an online collaborative development environment that enables you to code, build, debug in the cloud, and deploy to your PaaS of choice. Best of all, it’s completely free – and claiming your own Cloud IDE takes just minutes.

8. JS Bin

JS Bin allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code – new tabs doesn’t). Once you’re happy you can save, and send the URL to a peer for review or help. They can then make further changes saving anew if required.

9. CodeRun

CodeRun Studio is a cross-platform Integrated Development Environment (IDE), designed for the cloud. It enables you to easily develop, debug and deploy web applications using your browser. CodeRun Studio can be used instead or alongside your existing desktop IDE. You can upload existing code in order to test it in the cloud or for sharing with your peers.

10. eCoder

ecoder is a simple, web-based code editor, which includes a file browser, file uploader, and tabbed system to allow multiple files to be edited at the same time. using this web-application developers can edit code directly online, real-time syntax highlighting is handled by textarea and keyboard short-cuts lend it the feel of a locally installed application.

11. Kodingen

Kodingen is an Online Development Environment including Code Editor, Cloud Hosting, Database Administration, Collaboration, Web-based access.

12. EditArea

EditArea is a free javascript editor for source code. (That is no way a WYSIWYG editor). This editor is designed to edit souce code files in a textarea. The main goal is to allow text formatting, search and replace and real-time syntax highlight (for not too heavy text).

13. Codeanywhere

Codeanywhere is a code editor in a browser with an integrated ftp client, and all popular web formats are supported (HTML, PHP, JavaScript, CSS, and XML.

14. Codeita

Codeita is cloud-based software for prototyping and developing websites and web applications. It allows users to work together in a social environment, to create, edit and deploy web projects in a LAMP software bundle. Codeita makes it easy for developers to manage code, files and databases right from a browser-based dashboard. But, the main benefit of using this type of cloud-based software is team collaboration. Codeita allows users to share their web projects with other team members.

15. Drawter

Drawter is a tool written in JavaScript and based on jQuery library which enables you the possibility to literally draw your website’s code. It runs on every single web-browser which makes it really useful and helpful. Each tag is presented as a layer you have drawn.

16. Maqetta

Maqetta is an open source project that provides WYSIWYG visual authoring of HTML5 user interfaces. The Maqetta application itself is authored in HTML, and therefore runs in the browser without requiring additional plugins or downloads.

17. Builder Pro

BuildorPro uses visual, code editing and debugging tools to provide an extremely agile method of creating and managing your site’s design & mark. With BuildorPro you can use visual controls that enhance your design process whilst maintaining full control over the code itself.

18. ShiftEdit

ShiftEdit is an online IDE for developing PHP, Ruby, Python, Perl, HTML, CSS and JavaScript via FTP, SFTP, Dropbox and Google Drive.

19. Squad Editor

Squad is a web-based collaborative code editor.

20. Cloud9 IDE

Cloud9 IDE is an online development environment for Javascript and Node.js applications as well as HTML, CSS, PHP, Java, Ruby and 23 other languages.

Author Bio : This post is written by Franco who writes for WebToolsDepot and big fan of Grafixcrush.

Get Our Feeds Delivered To Your Inbox

Like This Post


Leave a Reply