10 programmers favorite HTML and CSS online code editor

The same essential tool in general software development is the code editor. Traditional code editors are generally installed in the form of software installation package to the computer, the code is compiled and saved to the server through ftp or svn and other tools (of course, such as NET development in Microsoft Visual Studio such a powerful integration Tools say another.).

In the actual project development in such a way is also very convenient. However, with the rise of various cloud services, the era of cloud storage has almost always been the trend of the times. It can not be expensive for individuals or small companies to build a similar service. This time using some of the existing online code editor, can make a lot of progress for your project progress and daily learning. In particular, some open source projects code maintenance and sharing.

What brings to you today is the favorite online code editor for 10 programmers. Including HTML, CSS, JavaScriptPHP, Python, Ruby on Rails and C / C ++. Specific we can go to the official website for more details.

alright, do not piffle any more. Take a look at what specific online code editor. There may be some you should be more familiar.

1. CodePe

CodePen is one of my favorite code editors. CodePen has some cool and unique features that make it one of the most popular online code editors in web development.

CodePen features are:

Preview HTML, CSS, and JavaScript in real time You can use the syntax of preprocessors like Sass, LESS, Stylus, Markdown, Haml, Slim, Jade to use the CodePen combo to showcase your talent and design your own portfolio home page. You can find part-time work using the Hire Me feature service. Any resource can be embedded in any other website. Dabblet

Dabblet interface is very simple, it is not complicated to operate, especially for novices and front-line siegemasters want to try the latest HTML5 tags and CSS3 style to use. A major feature of Dabblet is that code can be written without the CSS prefix. Because Lea Verou (the author of the tool) himself is the author of free-prefix JavaScript script-prefix-free, it certainly is a matter of course that Dabblet has this feature. Switching between HTML and CSS code is also easy, click on the top right of the toolbar to hide the label. Users can adjust the preview of the front-end code according to the habit, and the full-screen preview in the browser will open in a new tab.

Dabblet supports logging in with a Github account. The tested snippets can be stored either anonymously or in the user's Github: gist so that the user can embed the snippet in their own site or further share it with others.

Thimble

Thimble, an HTML / CSS online interactive learning site from Mozilla: left-hand editing, real-time preview on the right, with plenty of real-world examples. The site is part of Mozilla's recently launched Webmaker initiative to help ordinary users learn HTML and CSS online.

Thimble offers a two-panel design with a code editor on the left for syntax highlighting and a web preview on the right in real time. If the user is happy with the results, it can be released with the blue "Publish" button at the top right. Share your design results with your friends via the provided Twitter launch button.

JSFiddle

JSFiddle is a veteran of online JavaScript code debugging tools. Support JavaScript, CSS, HTML code visualization online debugging tools, support for a variety of applications a variety of mainstream framework, is very easy to use, but also can be debugged the results into a very simple page directly embedded in other web pages.

In addition to debugging code, you can easily post to your community, forum, or social media to share with your friends or ask questions. Integrate a lot of different libraries for your choice.

CSSDesk

The CSSDesk tool is a standard CSS sandbox that can give CSS beginners maximum help. The site is divided into three columns, and we can easily modify the code in the left-hand side to see the changes made to the HTML element by changing the code in real time on the left Even though we could put the whole site in place for debugging and save the debugged files as HTMl. The only regret is the lack of code hints, you need to manually enter the CSS properties.

CodeMirror

Another online source editor, Javascript-based, short-sighted, real-time online code highlighting, is not an affiliate of a rich text editor. He is the foundational library for many of the big-name online code editors.

As you can see, the author of CodeMirror is a longing for freedom. But his CodeMirror is not simple, take a look at the following list:

Google Earth KML samplerEloquent JavaScript's consoleThe qooxdoo playgroundA cool tutorial about the elementAn online IDE for the Orc programming languageGoogle's API playgroundRaphaël LiveJS BinThe RokPad plugin for JoomlaThe scraperwiki editorjsLinb UI Builder

Not surprisingly, these online code editors, all based on CodeMirror, have your familiar JS Library.

CodeMirror itself is also well-positioned and short-cut, but the quality of the code is high. In the Google Group there is a lively discussion of all sorts of changes with CodeMirror.

If you have a project that requires online code editing, what are you waiting for? CodeMirror is definitely your best bet.

JS Bin

JSBin is a web application primarily used to help test JavaScript and CSS code snippets. Function and jsFiddle website.

eCoder

ecoder is a web-based code editor developed using PHP and JavaScript. It includes: Real-time syntax highlighting, a file browser, a file uploader, and a tagging system that enable multiple files to be edited directly on the server.

Codeanywhere

Codeanywhere is an online code editor, you can write html, css, javascript, php, XML code in your browser, currently supports chrome, firefox, Opera, Safari, IE, of course, can also be installed on android, iphone codeanywhere Software.

Codeanywhere features: Write code anytime, anywhere (though I think writing code on the phone is a bit funny).

Codeanywhere support FTP Server, Dropbox, Github, such as Dropbox, you only have an account, connected to Dropbox, Codeanywhere can create html files on Dropbox, etc., the code you write is stored on Dropbox.

Cloud9 IDE

Cloud9 IDE is an application that tests for running Node.js and JavaScript platforms, but also Python, Ruby and Apache + PHP, such as Wordpress. A few days ago I shared the Nitrous.io space that supports programming languages ​​like Node.js, Python, Go, Rails, and soon my friends wrote emails to the tribe telling Cloud9 to run the application longer than Nitrous.io.

Cloud9 supports programming languages ​​such as Node.js, HTML5, PHP, Python / Django, Ruby on Rails, C / C ++, StrongLoop, providing FTP, SSH and space hosting, MysqL, MongoDB and SQLite database. You can also upload your own program code, support for collaborative editorial cooperation, the other can be integrated with other cloud space.

Cloud9 support a key code to publish to the Heroku, Windows Azure, Google App Engine, CloudFoundry and other cloud space, you can also sync to the Github space, in short, in addition to Cloud9 space does not support binding their own domain name, can not be permanently applied online In addition, Cloud9 space used to test procedures and code is good.