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等。
英文原文:sixrevisions,翻譯:info.9iphp.com
相關文章
- 程式碼高亮網站收集網站
- 網站統計程式碼網站
- 北大青鳥網站資訊展示頁面網站
- 一個網站故障排查的、程式碼更新的簡便指令碼網站指令碼
- 優化網站載入速度的14個技巧優化網站
- js防止網站映象程式碼JS網站
- 網站增加程式碼監測網站
- 幾個有趣的線上python 程式碼學習網站Python學習網站
- 13個超棒的程式碼資源網站推薦網站
- 優秀網站原始碼、程式設計原始碼下載網站大集中網站原始碼程式設計
- 網站升級中 HTML 程式碼網站HTML
- 網站存在漏洞怎麼修復 如何修補網站程式程式碼漏洞網站
- 想用ONETHINK 做一個產品展示網站,希望小夥伴幫助下網站
- 照著寫了一個線上購物網站產品展示的頁面網站
- Python練習題(三)--視訊展示網站Python網站
- 50個c/c++原始碼網站C++原始碼網站
- 特別好看個人主頁官網展示開源程式原始碼原始碼
- 一個程式語言比較網站網站
- 快速程式碼展示之快速的例子程式碼片段(轉)
- jQuey網站公告水平滾動程式碼網站
- 網站底部備案號html程式碼網站HTML
- 網站製作中常見的10個 HTML5 程式碼片段整理網站HTML
- 為網站實現一個驗證碼網站
- 營銷人不得不看的14個網站,值得收藏!網站
- 直播原始碼網站,訊息圖示在收到訊息時展示訊息條數原始碼網站
- 直播網站程式原始碼,FlowLayoutManager 流式佈局網站原始碼
- js防止網站被映象程式碼例項JS網站
- 網站被黑如何恢復 如何查詢網站木馬程式碼 防止被黑網站
- 委託初步瞭解(程式碼段展示)
- 原始碼網站原始碼網站
- 用 Laravel 做了個海淘優惠碼網站Laravel網站
- 公司網站密碼怎麼修改?修改密碼網站?網站密碼
- 網路展示廣告_2014年的兩大“風口”
- 進入網站後臺修改不了?模板網站能修改程式碼嗎?網站
- 程式設計師必收藏的五個網站程式設計師網站
- 18 個鍛鍊程式設計技能的網站程式設計網站
- 爬取某網站寫的python程式碼網站Python
- 不用程式碼,2小時搞定自己的網站網站