10个程序员最喜欢的 HTML和CSS 等在线代码编辑器

变一般软件开发中必备的一样工具就是代码编辑器。传统的代码编辑器一般都是以软件安装包的形式安装到电脑里面，代码编辑保存后一般也是通过ftp或者svn等工具提交到服务器的（当然，像.NET开发中Microsoft Visual Studio这样强大的集成工具另说了。）。

在实际的项目开发中这样的方式也是挺便捷的。但是，随着各种云服务的兴起，云存储时代几乎已经是大势所趋了。个人或者小公司搭建一个类似的服务自然代价不菲。这时候利用一些现有的在线代码编辑器，可以为你的项目进度和日常学习带来很大的帮助。特别是一些开源项目的代码维护和分享。

今天给大家带来的就是10个程序员最喜欢的在线代码编辑器。包括HTML，CSS、JavaScriptPHP、Python 、Ruby on Rails和C/C++等。具体的大家可以自己去官方网站详细了解。

当然，另外的也有一些你可能会喜欢的：

分享5款Linux系统下免费的 CSS 编辑器

盘点20个非常实用的Sublime Text插件

送给网页设计师和程序员的48个神奇的礼物

好了，废话不多说。来看看具体都有哪些在线代码编辑器。或许有一些你应该会比较熟悉。

1. CodePe

CodePen是我最喜欢的代码编辑器之一。 CodePen有一些炫酷而独特的功能，这使得它成为Web开发中最流行的在线代码编辑器之一。

CodePen的特点是：

实时预览HTML，CSS和JavaScript
您可以使用预处理程序的语法像Sass, LESS, Stylus. Markdown, Haml, Slim, Jade
使用CodePen组合展示才华和设计自己的组合主页。
您可以使用Hire Me（聘用我）功能服务找到兼职工作。
任何资源都可以嵌入在任何其他网站。

Dabblet

Dabblet的界面十分简洁，操作起来并不复杂，特别适合新手和想尝试最新HTML5标签和CSS3样式的前端攻城师使用。Dabblet的一大特色是代码编写时可免加CSS前缀。因为，Lea Verou（工具的作者）本人就是免CSS前缀JavaScript脚本 -prefix-free的作者，Dabblet拥有此功能当然是顺理成章的事。HTML和CSS代码间的切换也很方便，点击隐藏工具栏右上方的标签即可。用户可以根据习惯，调整前端代码的预览效果，浏览器内全屏预览将新标签页中打开。

Dabblet支持用Github帐号登录，测试的代码段既可以匿名保存也可以保存在用户的Github:gist中，以便用户将代码段嵌入自己的站点或是进一步分享给其他人。

Thimble

Mozilla 推出的HTML/CSS 在线交互式学习网站 Thimble：左侧编辑，右侧实时预览，带有大量真实案例。该站是 Mozilla 新近推出的 Webmaker 计划的组成部分，旨在帮助普通用户在线学习编写 HTML 和 CSS。

Thimble 提供的是双面板设计，左侧为带语法高亮的代码编辑，右侧可实时预览网页效果，如果用户对效果满意，可通过右上方的蓝色 “Publish” 按钮一键发布，还可通过提供的 Twitter 发布按钮与好友分享你的设计成果。

JSFiddle

JSFiddle是一个老牌的在线JavaScript代码调试工具。支持JavaScript、CSS、HTML代码可视化在线调试工具，支持多种应用多种主流框架，用起来非常方便，而且还可以将调试好的结果以非常简洁的页面直接嵌其他网页里。

除了可以调试代码外，还可以方便的发布到社区，论坛或者社交媒体上与朋友们分享或者提问。整合了很多的不同的类库供大家选择。

CSSDesk

CSSDesk工具是一个标准的CSS沙盒，可以给予CSS初学者最大的帮助，网站分成三栏，我们可以非常方便的通过在左侧实时修改代码来查看某个CSS属性的改变给HTML元素带来的影响，甚至我们可以把整个网站都放到其中来进行调试，并将调试完成的文件保存为HTMl。唯一的遗憾是缺少代码提示，需要手工输入CSS属性。

CodeMirror

又一款“Online Source Editor”，基于Javascript，短小精悍，实时在线代码高亮显示，他不是某个富文本编辑器的附属产品，他是许多大名鼎鼎的在线代码编辑器的基础库。

可以看出，CodeMirror的作者是一个十分向往自由的人。但他的CodeMirror绝对不简单，看看下面这份清单：

Google Earth KML sampler
Eloquent JavaScript’s console
The qooxdoo playground
A cool tutorial about the element
An online IDE for the Orc programming language
Google’s API playground
Raphaël Live
JS Bin
The RokPad plugin for Joomla
The scraperwiki editor
jsLinb UI Builder

上述的这些在线代码编辑器都是基于CodeMirror的，是不是感到惊讶，里面有你熟悉的JS Library。

CodeMirror本身的定位也很明确，短小精悍，但代码质量很高，在Google Group的群里面，人们热烈的进行着用CodeMirror做各式各样改造的讨论，可见对他的欢迎。

假如你有项目需要在线代码编辑，还等什么？CodeMirror，绝对是你最好的选择。

JS Bin

JSBin 是一个 Web 应用，主要用于帮助测试 JavaScript 和 CSS 的代码片段。功能与 jsFiddle 网站一致。

eCoder

ecoder是一个基于Web的代码编辑器，采用PHP和JavaScript开发。它包括：实时语法加亮，一个文件浏览器，一个文件上传器和一个标签系统能够实现直接在服务器上同时编辑多个文件。

Codeanywhere

Codeanywhere是一个在线的代码编辑器，你可以在浏览器中编写html、css、javascript、php、XML的代码，目前支持chrome、firefox、Opera、Safari、IE，当然也可以在android、iphone上安装codeanywhere的软件。

Codeanywhere的特点是：随时随地可以写代码（虽然我认为手机上写代码有点搞笑）。

Codeanywhere支持连接FTP Server、Dropbox、Github，比如Dropbox，你只要有一个账号，连上Dropbox后，Codeanywhere能够在Dropbox上创建html等文件，你写的代码都存放在Dropbox上了。

Cloud9 IDE

Cloud9 IDE是一个用来测试运行Node.js 和 JavaScript平台，但也支持Python, Ruby和 Apache+PHP的应用程序，例如Wordpress。前几天分享了支持Node.js、Python、Go、Rails等程序语言的Nitrous.io空间，很快有朋友给部落写邮件，告知Cloud9可以比Nitrous.io更长久地运行应用实例。

Cloud9支持的程序语言有Node.js、HTML5、PHP、Python / Django、Ruby on Rails、C/C++、StrongLoop，提供FTP、S-S-H和空间托管，有MysqL、MongoDB、SQLite数据库，可以一键安装Wordpress，也可以自己上传程序代码，支持协同编辑合作，另外可以和其它的云空间整合。

Cloud9支持将代码一键发布到Heroku、Windows Azure、Google App Engine、CloudFoundry等云空间上，还可以同步应用到Github空间上，总之，除了Cloud9空间不支持绑定自己的域名、无法永久保持应用在线外，Cloud9空间用来测试程序和代码还是不错的。

注：部分内容参考自Best Online HTML and CSS Code Editor For Web Developers。有个别编辑器网站可能需要VPN翻墙才能打开。有需要的可以自己去看看红杏插件。

最后小编还准备了彩蛋哦~

给大家一份免费的C语言学习课程，赶紧来领取吧！