在这些网站上演示你的代码

这些网站允许你这样做分享和展示你的代码。它们都有实时预览,这样其他人就可以看到您的代码。它们有时被称为“代码游乐场”或“沙盒”。它们不仅仅是演示源代码的地方,其中许多还是代码协作和实际编码工作的好工具。例如,如果需要帮助调试源代码,可以使用其中一个站点来共享有问题的代码,然后将链接提供给查看器。这样做为他们提供了一种方便的方式,能够审查您的源代码并提供解决方案。

CodePen

在CodePen上,你可以演示你的代码

Pen可以由HTML、CSS和JS组成。CodePen有很多特性,可以很容易地展示你的代码。例如,它支持Sass和Less语法,以及“快速添加”流行JS库(如jQuery和Angular)的选项。

看看网站上流行的钢笔,寻找灵感。CodePen

Liveweave

Liveweave是一个优秀的在线源代码编辑器。根据该网站的说法,网页设计师和开发人员的终极游乐场,一个测试,实践和分享你的创作的伟大工具。我喜欢Liveweave的地方在于,向你的演示中添加第三方依赖非常简单。

你可以添加Bootstrap, jQuery,或其他流行的web开发包在两次点击。Liveweave

dabblet

这个代码演示平台更倾向于CSS,但它确实具有HTML和JavaScript功能。一个不错的地方是它默认使用-prefix-free JS库,这意味着你不必担心为CSS属性添加供应商前缀。

dabblet

JS小提琴

JS Fiddle为你的JavaScript代码演示提供了大量的特性。它有多个版本的开发库,如jQuery、MooTools和React。它的接口中内置了代码分析工具JSHint的实现。

JS Fiddle甚至允许你使用Echo API模拟Ajax请求。JS小提琴

< kodtest / >

这款代码演示应用程序的一个亮点是,它能够根据移动设备的尺寸和其他常见的屏幕尺寸来缩放实时预览。此特性可以帮助您调试响应性断点。

相关:如何测试响应式设计< kodtest / >

砰砰作响

Plunker是一个在线社区,用于创建、协作和分享您的web开发想法。它的代码编辑器功能丰富。代码编辑器具有以下功能:实时流媒体,人们可以实时观看你的代码,代码分叉,用户贡献的开发堆栈/模板,内置的代码检测接口,等等。看到观看次数最多的演示在砰砰作响。

砰砰作响

CSSDeck

CSSDeck有一个干净的用户界面。如果您正在寻找一个简单的工具来展示源代码,那么这是一个不错的选择。看你的代码演示的人可以在上面留下评论,但要这样做,他们必须注册一个账户或登录他们的GitHub账户。

CSSDeck

code.reloado.com

这是另一个展示代码的简单工具。它有许多JS库供您使用。jQuery, Bootstrap, Prototype, Backbone, TwitterLib, Zepto等等。

code.reloado.com

Ideone

这个简单的代码共享工具允许您演示服务器端代码(PHP、Perl等等)。它也可以处理像c++这样的软件编程语言。当你运行你的代码时,Ideone会向你(和你的代码审阅者)显示你的代码输出。

它还将显示它找到的编译错误。Ideone

codepad

Codepad是演示服务器端代码的另一个选项。它支持诸如PHP、Ruby、C、c++、Python等编程语言。

codepad

JS本

JS Bin是一个功能丰富的源代码演示工具。它甚至有一个控制台(命令行界面)用于调试和检查代码。控制台的工作原理和里面的很像Chrome开发工具

哦,JS Bin也有codecastingJS本

Tinkerbin

Tinkerbin是一个简单的代码游乐场,具有您所期望的所有功能。Tinkerbin支持JavaScript之外的CoffeeScript, CSS之外的Sass/SCSS/Less, HTML之外的HAML。

Tinkerbin

jqversion

这是一个很好的jQuery代码测试平台。jqversion有多个版本的jQuery -它甚至有发布候选版本。相关:关于jQuery你可能不知道的11件事jqversion

SQL小提琴

SQL小提琴是演示你的SQL语句

它可以执行MySQL, MS SQL, PostgreSQL, Oracle数据库和SQLite语句。SQL小提琴

为什么选择这些网站?

有很多网站允许你展示你的源代码。这是不可能的,甚至对你没有用处,如果我要涵盖它们。

为了使这个列表更易于管理,我创建了一组站点必须满足的合理要求。这些要求使得该站点对于想要共享代码演示的编码员来说非常友好。该网站必须满足以下标准:

  1. 它有实时预览
  2. 用户可以保存他们的工作并且能够分享到它的唯一链接
  3. 无需注册访问上述两个特性。帐户创建在共享代码的过程中增加了一个额外的步骤。此外,该标准为需要或喜欢匿名的程序员提供了不透露任何个人信息的选择。

这里还有一些很棒的网站。它们不符合上述“无需注册”的标准,但它们是值得一看的好网站:

  • 可运行的在这个网站上,你不仅可以演示你的前端代码,还可以演示你的服务器端代码(PHP, .NET, MySQL, Rails和其他许多代码)。
  • 编译器-一个很好的在线代码编辑器,具有演示功能。
  • Python小提琴-一个演示Python代码的平台。

你在哪里演示代码?

如果你已经在使用其中一个或多个网站,请分享你的小贴士和故事推特

相关内容

雅各Gube是Six Revisions的创始人。他是前端开发人员。与他联系推特

WebFX职业

加入我们的使命,为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。

我们招聘!
查看30+职位空缺!