14款優秀的代碼展現網站

本文列出的這些網站能夠分享和展現你的代碼。它們都提供在線預覽功能，因此別人能夠看到你的代碼如何運行。它們有時候也被稱做「代碼廣場」或者「沙箱」。

它們不單單提供簡單的代碼展現功能，還提供不少代碼協做和實際編程過程會用到的功能。例如，當你須要別人幫你調試源代碼的時候，可使用這些網站分享你有問題的代碼，而後把連接分享給幫助你的人。這使得他們能夠方便的查看你的源代碼並提供解決方案。

1.CodePen

在CodePen上，你能夠演示被稱做 pens 的代碼。Pen 由 HTML、CSS和JS組成。Codepen有不少方便你展現代碼的功能。例如，它支持 SASS 和 LESS 語法，能夠快速的添加經常使用的JS庫如jQuery、Angular等。這裏能夠查看該網站上流行的Pens。

在線預覽

2.Liveweave

Liveweave是一個很是棒的在線源代碼編輯器。這也是網站設計師和開發者的終極遊樂場，一個偉大的測試、練習和展現你代碼的工具。我喜歡它可 以很是方便的爲你的代碼添加第三方依賴。你只需點擊兩次就能夠爲你的代碼添加Bootstrap、jQuery等經常使用的Web開發包。

在線預覽

3.dabblet

這個代碼展現平臺更偏向於CSS，但它也有HTML和JS展現功能。一個方便的地方是它使用了-prefix-free JS庫，因此你不須要擔憂CSS屬性的前綴。

在線預覽

4.JS Fiddle

JS Fiddle具備很是強大的JavaScript代碼展現功能。它具備多個版本的開發庫，如jQuery、MooTools、React。它內置代碼分析工具JSHint。它甚至容許你經過它的 echo API來模擬AJAX請求。

在線預覽

5.<kodtest/>

這個代碼高亮展現網站容許你調整預覽尺寸，支持移動設備和一些其餘經常使用的屏幕設備。這個功能能夠幫你快速調試響應式斷點。

在線預覽

6.Plunker

Plunker是一個建立、合做、分享你的網站開發思路的在線社區。它的代碼編輯器具備很是多的功能。這裏是一個Plunker上瀏覽最多的展現列表。

在線預覽

7.CSSDeck

CSSDeck具備一個簡潔的用戶界面。若是你想找一個簡單的展現代碼的功能，這個一個很好的候選工具。看到你代碼展現的人能夠在下面作出評論，不過他們須要提早註冊該網站的賬號或者使用Github賬號登陸。

在線預覽

8.code.reloado.com

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

在線預覽

9.Ideone

這個代碼展現工具容許你展現服務器端代碼語言(PHP、Perl等)。也能夠處理像C++這樣的軟件編程語言。當你運行代碼的時候，Ideone會爲你和你的代碼reviewers顯示運行結果。它也會爲你列出它發現的編譯錯誤。

在線預覽

10.codepad

codepad是另外一個展現服務器端語音的選擇。它支持編程語言如PHP、Ruby、C、C++、Python等。

在線預覽

11.JS Bin

JS Bin是一個集成不少功能的代碼展現平臺。它甚至有個控制檯來讓你調試和檢查代碼。它的控制檯跟Chrome瀏覽器的控制檯基本同樣。而且JS Bin具備codecasting。

在線預覽

12.Tinkerbin

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

在線預覽

13.jqversion

這個一個很好的測試jQuery代碼的地方。它提供了多個版本的jQuery庫。

在線預覽

14.SQL Fiddle

SQL Fiddle是展現你的SQL語句的平臺。它能夠運行 MySQL, MS SQL, PostgreSQL, Oracle Database, SQLite等。

在線預覽