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等。

在线预览

本文固定链接: http://www.i7758.com/archives/2113.html

时间: 06-23

14款优秀的代码展示网站的相关文章

14款优秀的JavaScript调试工具大盘点

JavaScript是一种非常简单的语言,一般说来任何人都可以在几小时内掌握它的基本知识. 然而就像其他任何语言一样,JavaScript存在着一些可以轻易避免的常见错误和不好的做法.开发人员喜欢使用这个脚本语言来改善用户界面,提供丰富多彩的功能,或者在网站上制作各种互动元素. 不过,调试JavaScript对正在开发web开发人员而言可以说是一项相当痛苦又艰巨的任务.因此我们收集了一些最好的JavaScript调试工具,希望可以帮助你调试脚本,以实现更精确的结果.诚挚地希望这些我们推荐的工具能

(转)3款优秀的移动webAPP网站在线测试工具

原文:原文地址(本博主一向尊重原作) 目前适配各个终端的需求越来越强烈呢?比如我们APP项目上线之后,需要一个宣传推广专题页,这个页面当然最好是采取响应式布局来完成.因为需要来推广和下载我们的APP. 无论用户是电脑打开,还是移动端打开,都是可以下载我们的APP. 今天,跟大家分享3个非常不错的响应式布局在线测试工具. 第一款:之前25学堂介绍过的responsinator,堪称手机版网站在线预览测试神器-responsinator 只要打开这个酷站,在上端的输入框中输入你想测试的网站URL 第

Ngrok,一款可以帮助你展示网站和联网开发的工具

使用Ngrok的目的就是为了可以让别人通过网络访问到自己本机上的项目 下面是一个简单的使用教程,详细的查看官网英文文档. 第一步: 登录官网:https://ngrok.com/ 注册或者登录 第二步: 按照上图步骤,首先下载相应的版本 如下为我的解压后的存放目录 按着[shift]键,单击右键,弹出菜单选择"在此处打开命令窗口" 可以通过"ngrok help"查看帮助信息 回车,OK,保存到下面目录文件下: 接着输入"ngrok http 80&quo

进阶学习,如何无代码设计一款美观且实用的网站?

作为一门新兴的边缘性职业,网站设计既要从外观上创意,又要适当结合图形.版面及交互设计等相关原理,使得它成为一门独特且令人神往的艺术.毫无疑问,好的设计能让网站在诸多站点中脱颖而出,优秀的创意和表现方式能给浏览者留下深刻的印象,从而持续间接地增加网站访问流量和转换率.然而,要设计出一款兼顾"颜值和实用性"的个人/企业网站并不容易,更不用说让设计想法落地实现出来对大多数人说更是一项艰巨的任务. 那到底如何才能在时间和技能有限的情况下,设计出一款令人满意甚至网红的网站呢?小编认为,在设计的初

【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css 来自定义外观. fancybox 特点: 可以支持图片.html 文本.flash 动画.iframe 以及 ajax 的支持: 可以自定义播放器的 css 样式: 可以以组的形式进行播放: 如果将鼠标滚动插件(mouse wheel plugin)包含进来的话 fancybox 还能支持鼠标滚轮滚

15款优秀移动APP产品原型设计工具

一款优秀的移动APP产品原型设计工具应该具备: ①.支持移动端演示(随时随地演示给BOSS,厕所&食堂&电梯-以体现我是那么的敬业--长点工资必备) ②.组件库(高效复用,谁用谁知道) ③.可以快速生成全局流程(程序猿看不懂拆解的,给丫的看这个) ④.在线协作(多个PM狗一起用) ⑤.手势操作.转场动画.交互特效-(这些都不需要,留给专业的交互.视觉,搞那么虚的不如多想想产品流程逻辑做做减法.写写xxRD啥的) 这些年,产品狗们折腾过的原型工具: 1. POP(Prototyping on

【辅助工具】20款优秀的移动产品原型和线框图设计工具(二)

接前一篇:[辅助工具]20款优秀的移动产品原型和线框图设计工具(一):http://www.cnblogs.com/haochuang/p/3997140.html 11.WireframeSketcher WireframeSketcher是一款强大的.灵活的线框图和原型快速创作工具,适用于桌面app和移动app开发者.WireframeSketcher可以作为单独的app,也可作为一个Eclipse 插件. WireframeSketcher 还是一款简单的带有手绘风格的创作工具,这样你就不

国内外优秀的源码网站

不管你是初学一门计算机语言或技术,还是想学习别人的经验和创意.做为一个开发人员,都会经常需要到搜索一些代码,下面是7个地方可以帮助你快速寻找到你需要的代码. GitHub Code Search http://github.com/search 热门的开源代码库和和版本控制服务. GitHub 在最近启动了Code Search .即使它才启动不久,但凭借GitHub 的受欢迎度和成千上万的代码库,GitHub 的这项代码搜索服务已经非常受欢迎. Krugle Krugle 是一个为开发人员量身

如何设计一款优秀的短视频 SDK

2017 年,短视频成为了内容创业的新风口,各种短视频 App 如雨后春笋般先后上线,随着互联网内容消费升级,视频越来越像文字.图片一样,成为每一个 App 不可或缺的一部分. 为了能够更好地聚焦于业务,早日完成短视频 APP 的上线,越来越多的公司倾向于选择一家靠谱的短视频 SDK 来起步,怎么定义靠谱?要关注哪些指标?仅功能满足就可以了吗? -- 显然不够,下面我们看看,如何才能设计一款优秀的短视频 SDK ? 1. 包体一定要尽可能小 在移动互联网时代,App 的包体大小,对获取用户有着至