14個程式碼展示網站

info.9iphp.com發表於2015-06-16

  本文列出的這些網站可以分享和展示你的程式碼。它們都提供線上預覽功能,所以別人可以看到你的程式碼如何執行。它們有時候也被稱作“程式碼廣場”或者“沙箱”。

  它們不僅僅提供簡單的程式碼展示功能,還提供很多程式碼協作和實際程式設計過程會用到的功能。例如,當你需要別人幫你除錯原始碼的時候,可以使用這些網站分享你有問題的程式碼,然後把連結分享給幫助你的人。這使得他們可以方便的檢視你的原始碼並提供解決方案。

 1. CodePen

  在CodePen上,你可以演示被稱作 pens 的程式碼。Pen 由 HTML、CSS和JS組成。Codepen有很多方便你展示程式碼的功能。例如,它支援 SASS 和 LESS 語法,可以快速的新增常用的JS庫如jQuery、Angular等。這裡可以檢視該網站上流行的Pens

demo-code-codepen

 2. Liveweave

  Liveweave是一個非常棒的線上原始碼編輯器。這也是網站設計師和開發者的終極遊樂場,一個偉大的測試、練習和展示你程式碼的工具。我喜歡它可以非常方便的為你的程式碼新增第三方依賴。你只需點選兩次就可以為你的程式碼新增Bootstrap、jQuery等常用的Web開發包。

demo-code-liveweave

 3. dabblet

  這個程式碼展示平臺更偏向於CSS,但它也有HTML和JS展示功能。一個方便的地方是它使用了-prefix-free JS庫,所以你不需要擔心CSS屬性的字首。

demo-code-dablet

 4. JS Fiddle

  JS Fiddle具有非常強大的JavaScript程式碼展示功能。它具有多個版本的開發庫,如jQuery、MooTools、React。它內建程式碼分析工具JSHint。它甚至允許你通過它的 echo API來模擬AJAX請求。

demo-code-jsfiddle

 5. <kodtest/>

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

demo-code-kodtest

 6. Plunker

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

demo-code-plunker

 7. CSSDeck

  CSSDeck具有一個簡潔的使用者介面。如果你想找一個簡單的展示程式碼的功能,這個一個很好的候選工具。看到你程式碼展示的人可以在下面做出評論,不過他們需要提前註冊該網站的帳號或者使用Github帳號登入。

demo-code-cssdeck

 8. code.reloado.com

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

demo-code-codereloado

 9. Ideone

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

demo-code-ideone

 10. codepad

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

demo-code-codepad

 11. JS Bin

  JS Bin是一個整合很多功能的程式碼展示平臺。它甚至有個控制檯來讓你除錯和檢查程式碼。它的控制檯跟Chrome瀏覽器的控制檯基本一樣。並且JS Bin具有codecasting

demo-code-jsbin

 12. Tinkerbin

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

demo-code-tinkerbin

 13. jqversion

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

demo-code-jqversion

 14. SQL Fiddle

  SQL Fiddle是展示你的SQL語句的平臺。它可以執行 MySQL, MS SQL, PostgreSQL, Oracle Database, SQLite等。

demo-code-sql-fiddle

  英文原文:sixrevisions,翻譯:info.9iphp.com

相關文章