10個程序員最喜歡的HTML和CSS等在線代碼編輯器
一般軟件開發中必備的一樣工具就是代碼編輯器。傳統的代碼編輯器一般都是以軟件安裝包的形式安裝到電腦里面，代碼編輯保存后一般也是通過 ftp 或者 svn 等工具提交到服務器的（當然，像 .NET 開發中 Microsoft Visual Studio 這樣強大的集成工具另說了。）。
在實際的項目開發中這樣的方式也是挺便捷的。但是，隨著各種云服務的興起，云存儲時代幾乎已經是大勢所趨了。個人或者小公司搭建一個類似的服務 自然代價不菲。這時候利用一些現有的在線代碼編輯器，可以為你的項目進度和日常學習帶來很大的幫助。特別是一些開源項目的代碼維護和分享。
今天給大家帶來的就是 10 個程序員最喜歡的在線代碼編輯器。包括 HTML，CSS、JavaScriptPHP、Python 、Ruby on Rails 和C/C++等。具體的大家可以自己去官方網站詳細了解。
CodePen 是我最喜歡的代碼編輯器之一。 CodePen 有一些炫酷而獨特的功能，這使得它成為 Web 開發中最流行的在線代碼編輯器之一。
CodePen 的特點是：
- 實時預覽 HTML，CSS 和 JavaScript
- 您可以使用預處理程序的語法像 Sass, LESS, Stylus. Markdown, Haml, Slim, Jade
- 使用 CodePen 組合展示才華和設計自己的組合主頁。
- 您可以使用 Hire Me（聘用我）功能服務找到兼職工作。
- 任何資源都可以嵌入在任何其他網站。
Dabblet 的界面十分簡潔，操作起來并不復雜，特別適合新手和想嘗試最新 HTML5 標簽和 CSS3 樣式的前端攻城師使用。Dabblet 的一大特色是代碼編寫時可免加 CSS 前綴。因為，Lea Verou（工具的作者）本人就是免 CSS 前綴 JavaScript 腳本 -prefix-free 的作者，Dabblet 擁有此功能當然是順理成章的事。HTML 和 CSS 代碼間的切換也很方便，點擊隱藏工具欄右上方的標簽即可。用戶可以根據習慣，調整前端代碼的預覽效果，瀏覽器內全屏預覽將新標簽頁中打開。
Dabblet 支持用 Github 帳號登錄，測試的代碼段既可以匿名保存也可以保存在用戶的 Github:gist 中，以便用戶將代碼段嵌入自己的站點或是進一步分享給其他人。
Mozilla 推出的 HTML/CSS 在線交互式學習網站 Thimble：左側編輯，右側實時預覽，帶有大量真實案例。該站是 Mozilla 新近推出的 Webmaker 計劃的組成部分，旨在幫助普通用戶在線學習編寫 HTML 和 CSS。
Thimble 提供的是雙面板設計， 左側為帶語法高亮的代碼編輯，右側可實時預覽網頁效果， 如果用戶對效果滿意， 可通過右上方的藍色 “Publish” 按鈕一鍵發布， 還可通過提供的 推ter 發布按鈕與好友分享你的設計成果。
JSFiddle 是一個老牌的在線 JavaScript 代碼調試工具。支持 JavaScript、CSS、HTML 代碼可視化在線調試工具，支持多種應用多種主流框架，用起來非常方便，而且還可以將調試好的結果以非常簡潔的頁面直接嵌其他網頁里。
除了可以調試代碼外，還可以方便的發布到社區，論壇或者社交媒體上與朋友們分享或者提問。整合了很多的不同的類庫供大家選擇。
CSSDesk 工具是一個標準的 CSS 沙盒，可以給予 CSS 初學者最大的幫助，網站分成三欄，我們可以非常方便的通過在左側實時修改代碼來查看某個 CSS 屬性的改變給 HTML 元素帶來的影響，甚至我們可以把整個網站都放到其中來進行調試，并將調試完成的文件保存為 HTMl。唯一的遺憾是缺少代碼提示，需要手工輸入 CSS 屬性。
又一款“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，絕對是你最好的選擇。
JSBin 是一個 Web 應用，主要用于幫助測試 JavaScript 和 CSS 的代碼片段。功能與 jsFiddle 網站一致。
ecoder 是一個基于 Web 的代碼編輯器，采用 PHP 和 JavaScript 開發。它包括：實時語法加亮，一個文件瀏覽器，一個文件上傳器和一個標簽系統能夠實現直接在服務器上同時編輯多個文件。
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 是一個用來測試運行 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。有個別編輯器網站可能需要自備梯子。
<span id="shareA4" class="fl">
</span>