14個強大的代碼編輯網站

今天我将跟大家分享一些可以展示你代碼的網站，它們都提供線上預覽功能，是以别人可以看到你的代碼如何運作。它們有時候也被稱作“代碼廣場”。

它們不僅僅提供簡單的代碼展示功能，還提供很多代碼協作和實際程式設計過程會用到的功能。

例如，當你需要别人幫你調試源代碼的時候，可以使用這些網站分享你的問題代碼，然後把連結分享給幫助你的人。這使得他們可以友善的檢視你的源代碼并提供解決方案。

1、CodePen

網址：https://codepen.io

在CodePen上，你可以示範被稱作 pens 的代碼。Pen 由 html、css和js組成。Codepen有很多友善你展示代碼的功能。

例如，它支援 SASS 和 LESS 文法，可以快速的添加常用的js庫如jQuery、Angular等。這裡可以檢視該網站上流行的Pens。

2、Liveweave

網址：https://liveweave.com/

Liveweave是一個非常棒的線上源代碼編輯器。這也是網站設計師和開發者的終極遊樂場，一個偉大的測試、練習和展示你代碼的工具。

我非常喜歡它，它可以非常友善的為你的代碼添加第三方依賴。你隻需點選兩次就可以為你的代碼添加Bootstrap、jQuery等常用的Web開發包。

3、dabblet

網址：https://dabblet.com/

這個代碼展示平台更偏向于css，但它也有html和JS展示功能。一個友善的地方是它使用了-prefix-free JS庫，是以你不需要擔心CSS屬性的字首。

4、JS Fiddle

網址：https://jsfiddle.net/

JS Fiddle具有非常強大的JavaScript代碼展示功能。它具有多個版本的開發庫，如jQuery、MooTools、react。它内置代碼分析工具JSHint。

它甚至允許你通過它的 echo API來模拟AJAX請求。

5、kodtest

網址：http://kodtest.com/

這個代碼高亮展示網站允許你調整預覽尺寸，支援移動裝置和一些其他常用的螢幕裝置。這個功能可以幫你快速調試響應式斷點。

6、Plunker

網址：http://plnkr.co/

Plunker是一個建立、合作、分享你的網站開發思路的線上社群。它的代碼編輯器具有非常多的功能。這裡是一個Plunker上浏覽最多的展示清單。

7、CSSDeck

網址：http://i.9iphp.com/wp-content/uploads/2015/06/demo-code-cssdeck.jpg

CSSDeck具有一個簡潔的使用者界面。如果你想找一個簡單的展示代碼的功能，這個一個很好的候選工具。

看到你代碼展示的人可以在下面做出評論，不過他們需要提前注冊該網站的帳号或者使用Github帳号登入。

8、code.reloado.com

網址：http://code.reloado.com/#JavaScript,html

這是另一個簡單的展示你代碼的工具。它提供很多js庫， jQuery, Bootstrap, Prototype, Backbone, TwitterLib, Zepto等等。

9、Ideone

網址：https://ideone.com/

這個代碼展示工具允許你展示伺服器端代碼語言(PHP、Perl等)。也可以處理像C++這樣的軟體程式設計語言。當你運作代碼的時候，Ideone會為你和你的代碼reviewers顯示運作結果。它也會為你列出它發現的編譯錯誤。

10、codepad

網址：http://codepad.org/

codepad是另一個展示伺服器端語音的選擇。它支援程式設計語言如PHP、Ruby、C、C++、Python等。

11、JS Bin

網址：http://jsbin.com/?html,output

JS Bin是一個內建很多功能的代碼展示平台。它甚至有個控制台來讓你調試和檢查代碼。它的控制台跟Chrome浏覽器的控制台基本一樣。并且JS Bin具有codecasting。

12、Tinkerbin

網址：https://tinkerbin.herokuapp.com/

Tinkerbin是一個簡單的提供了你需要的所有功能的代碼廣場。Tinkerbin除了支援JavaScript還支援CoffeeScript，除了支援CSS還支援Sass/SCSS/Less，除了支援HTML還支援HAML。

14、SQL Fiddle

網址：http://sqlfiddle.com/

SQL Fiddle是展示你的SQL語句的平台。它可以運作 MySQL, MS SQL, PostgreSQL, Oracle Database, SQLite等。

學習更多技能

請點選下方公衆号

​