10個程式設計師最喜歡的 HTML和CSS 等線上程式碼編輯器

　　一般軟體開發中必備的一樣工具就是程式碼編輯器。傳統的程式碼編輯器一般都是以軟體安裝包的形式安裝到電腦裡面，程式碼編輯儲存後一般也是通過ftp或者svn等工具提交到伺服器的（當然，像.NET開發中Microsoft Visual Studio這樣強大的整合工具另說了。）。

　　在實際的專案開發中這樣的方式也是挺便捷的。但是，隨著各種雲服務的興起，雲端儲存時代幾乎已經是大勢所趨了。個人或者小公司搭建一個類似的服務自然代價不菲。這時候利用一些現有的線上程式碼編輯器，可以為你的專案進度和日常學習帶來很大的幫助。特別是一些開源專案的程式碼維護和分享。

　　今天給大家帶來的就是10個程式設計師最喜歡的線上程式碼編輯器。包括HTML，CSS、JavaScriptPHP、Python 、Ruby on Rails和C/C++等。具體的大家可以自己去官方網站詳細瞭解。

　　好了，廢話不多說。來看看具體都有哪些線上程式碼編輯器。或許有一些你應該會比較熟悉。

　　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。有個別編輯器網站可能需要自備梯子。

　　via: yusi123