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_com
Compilr is an online compiler and online IDE that enables you to work with PHP, C, C++, Ruby and compiler for Java, C# and VB.net and the XNA platform from almost any web browser.
 
Source
 

2. Dabblet

dabblet_com
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.
 
Source
 

3. jsdo.it

jsdo_it
 
Source
 

4. Thimble, by Mozilla

thimble
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.
 
Source
 

5. Jsfiddle

jsfiddle_net
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.
 
Source
 

6. CodeMirror

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.
 
Source
 

7. eXo Cloude IDE

exocloudide
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.
 
Source
 

8. JS Bin

jsbin_com
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.
 
Source
 

9. CodeRun

coderun_com
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.
 
Source
 

10. eCoder

ecoder_quintalinda_com
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.
 
Source
 

11. Kodingen

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

12. EditArea

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).
 
Source
 

13. Codeanywhere

codeanywhere_net
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.
 
Source
 

14. Codeita

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.
 
Source
 

15. Drawter

drawter_com
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.
 
Source
 

16. Maqetta

maqetta_org
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.
 
Source
 

17. Builder Pro

buildorpro_com
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.
 
Source
 

18. ShiftEdit

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

19. Squad Editor

squadedit_com
Squad is a web-based collaborative code editor.
 
Source
 

20. Cloud9 IDE

cloud9
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.
 
Source
 

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

  0 Like

AUTHOR INFO

Tech Gaming Geek trapped inside Tron.

Latest posts by Gavin (see all)

Leave a Reply