所以,我主要是JavaScript开发人员,并且我已经使用Stack Overflow了一段时间。我不断发现自己需要使用http://jsfiddle.net(或类似文件)来提供演示中的演示。 jsFiddle很棒;但是,我想知道Stack Overflow是否有任何计划为其用户创建自己的(稍微更永久)的代码游乐场?
我发现在我的答案中发布的内容已演示就绪(也就是说,它是不包含占位符的真实代码)。我可以想象实现它的一种方法是使用“运行此”按钮,该按钮从帖子中获取代码块,尝试执行它们,然后在覆盖图(或新窗口)中打开结果。

评论

非JS代码呢?另外,我认为这已经在另一篇文章中提出了...

这是一个好点。但是随着时间的流逝,我认为我们会看到诸如Flash的jsFiddle(ActionScript),Silverlight(.NET语言)以及可能的x86代码(code.google.com/p/nativeclient)之类的服务?

那里有Flash服务(wonderfl.net/about)

我只是来这里建议这个;你把我击败了大约9个月。 :]

由于这些站点有可能屈服于linkrot,因此应予以实施。一开始只能用于javascript,然后可以扩展。这不受linkrot的限制,因为理论上只要交易所启动,小提琴就会启动(反之亦然)。我们也可以做到这一点,使这些StackFiddles可以在聊天中和其他许多Fiddle站点无法做到的其他优点中被一体包装。

我只想说我深切希望看到与jsFiddle和stackoverflow的超紧密集成!

您可能想签出[这个漂亮的用户脚本[(meta.stackexchange.com/a/99598/178438)。安装后,您可以在标记的代码块中运行JS代码:)

@MrLister ideone.com吗?

+1我们也一起带来sqlfiddle! (是的,我知道这会增加很多开销)

这也是要考虑的许可,因为Stack Overflow是CC,其中JSFiddle是“所有代码都属于发布者,不强制执行任何许可。”

我必须完全同意!我刚刚发布了jsFiddle jsfiddle.net/sixfootjames/LY5y5/35的工作模型示例,人们可以在其中看到我所做的努力,而不仅仅是询问并期望其他人解决问题。现在,我必须将我所有的代码复制回SOstackoverflow.com/questions/21574424/…这非常冗长,而且没有多少人有时间阅读这么多的代码。如果有各种各样的soFiddle,那将更加有用。

尽管此请求是考虑到Stack Overflow提出的,但它适用于其他任何有关代码的站点。由于这篇文章而开发的功能至少在其他十个站点上得到了使用,那么为什么要进行密切投票?

#1 楼

我们在这里实现了这样的事情:

反馈:请求中的可运行代码段

我们考虑过仅嵌入JSFiddle,但我们确实想确保所有代码本身都包含在帖子本身中,而不依赖第三方。也有一些许可证问题。我们决定暂时只推出自己的产品,因为让它按照我们想要的方式运行非常简单。

评论


哇,太神奇了!谢谢。抱歉,我没有尽快接受这个答案。 :)等不及要看这个了。

–亚当
2015年4月19日在21:57



@Adam直播!已经好几个月了。

–David Fullerton
15年4月20日在1:26

哦,太棒了!在问题中它说:“目前,它仅在Meta Stack Overflow上启用。”这就是让我相信它还不存在的原因。阅读此问题或链接的“请求反馈:问题和答案中的可运行代码段”问题页面的人将如何理解这一点?也许我只是想念一些东西。

–亚当
15年4月24日在0:34

#2 楼

jsFiddle是我的项目。
有什么办法可以使JSFiddle与Stack Overflow更好地配合?

评论


你做到了?顺便说一句,很棒的网站。

–uɐɯsOuɐɥʇɐN
2010年5月16日,1:12

是的,确实很棒。嗯,不确定。我要求这样做的主要原因是因为我担心jsF的寿命。我可以想到你们可以做的一件事:在“份额”下拉列表下,提供第三个要发布到SO的字符串,也许是:“ ** HTML ** \ n \ n” + html +“ \ n \ n ** CSS ** \ n \ n“ + css +” \ n \ n ** JS ** \ n \ n“ + js,其中html,css和js是在每行前加上制表符的代码字符串( SO中的代码块)。如您所见,这通常是手工完成的:stackoverflow.com/questions/2807599/…。

–亚当
2010年5月16日15:51



JSFiddle非常出色,感谢您提供的优质服务!

– Pekka
2010-10-24 20:35

我建议包括一个API,以便stackoverflow可以访问小提琴并将其存储在本地。这样,就不必担心链接会消失,并使某些答案在适当的时候变得毫无用处。在StackOverflow上,我因斥责一个简单的解决方案而没有在我的答案中提供代码段而受到谴责。我看到了小提琴链接在短期内是如何有益的,但从长远来看,这可能是个问题。

–三明治
2011年1月2日7:46



我已经开始编写API-它是“不可写的”-MooTools正在将其用于演示(doc.jsfiddle.net/api/post.html),但是它们的用例不同。始终可以创建小提琴并从中下载代码(添加/ show_css /以获得小提琴的CSS一部分)。它没有保留,但是我认为它不会随着beta版本而改变...

– Zalun
2011年1月10日上午10:38

去吧去jsFiddle人! :-)

–xanatos
2011-09-5 5:14



我主要遇到的问题是高峰时段的速度。响应时间太慢了,因为每个人都在使用它。我知道有人设法就捐赠事宜与您联系,但遭到拒绝。我很乐意帮助你们获得更多服务器,因此我们不必处理滞后问题,而且我敢肯定,使用您网站的人也会这样做。

–隐身
2011年12月6日在16:51

另一个问题是自动加载小提琴,使浏览器或至少选项卡崩溃。我们应该有一个URL hack,例如添加/ norun之类的东西,以便我们可以查看代码。

–隐身
2011年12月6日下午16:52

@ user147116您还在这里回答问题吗?

– Naftali又名Neal
2011-12-12 18:13



@Incognito已经存在。只需在末尾添加/ embedded。示例:jsfiddle.net/maniator/K3wCM/embedded

– Naftali又名Neal
2011-12-12 18:15

高峰时间确实是有问题的-我主要是在Beta版上工作,但是我几乎要在jsfiddle中添加更多服务器(它的设计目的不是为了可扩展...)

– Zalun
2011-12-20 8:56

昨天我刚刚添加了第二台服务器,这应该摆脱丑陋的502。我仍然需要调整mysql配置。

– Zalun
2012年1月11日在16:19

怎么还没有融入到SO中呢?我记得几个月前读过。这应该是他们的第一要务。

– switz
2012年3月4日13:55

我真的想要jsFiddle与SO集成

–古尔瑙
2012年3月29日21:36

标记该代码的许可证的快速简便方法,以及显示许可证的可见位置。如果要以SO为目标站点,请在列表中首先放置“公共域/'所有人免费'”和“知识共享署名-相同方式共享”。

–埃米尔·维克斯特伦(EmilVikström)
2012年6月20日16:47

#3 楼

如果SO看到发布的jsFiddle链接或托管自己的安装,则可能在iframe中包含精简的jsFiddle页面。无论如何,这都是一个很好的补充,因为我发现自己每次看到有人发布示例代码时都想推广jsF​​iddle。

#4 楼

我知道这是一个旧线程,但是我想我会添加一个更新的答案,因为我最近决定实现一个将jsFiddles嵌入Markdown帖子中的约定(同时保持清理状态)

如下所示:

// render jsFiddle embed iframe with default options
$[http://jsfiddle.net/uzMPU/]

// render jsFiddle embed iframe with specific tabs
$[http://jsfiddle.net/uzMPU/][result,js,css]


此外,按照与链接和图像相似的约定,通过id引用链接也将有效:

// render jsFiddle embed iframe with default options
$[1]

// render jsFiddle embed iframe with specific tabs
$[1][result,js,css]

  [1]: http://jsfiddle.net/uzMPU/


这将导致以下iframe呈现为以下内容:

<iframe src="http://jsfiddle.net/uzMPU/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

<iframe src="http://jsfiddle.net/uzMPU/embedded/result,js,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>


(实际上,我对此做了一些修改,并且其中包括一个样式标签:默认为width: 100%; height: 300px;

除了$[]语法外,我还要求$[]完全独立。因此,编写以下代码:

This is an inline $[http://jsfiddle.net/uzMPU] fiddle looking link


不会导致渲染iframe。

我在MarkdownSharp上做了一些补充(这是堆栈用来处理markdown AFAIK的堆栈),并在我的文章JS扩展Markdown / MarkdownSharp的博客中进行了博客介绍。 / html / css标记的问题...尽管我也认为本质上会有太多的“链接作为答案”的问题。

#5 楼

我想要像嵌入式JSFiddle框架这样的东西,可以启用用JavaScript标记的问题。基本上,您不需要单击链接即可查看JSFiddle的奇迹,它们应该显示在Stackoverflow本身上。

评论


我同意,我的想法不是在您的问题中包含代码示例,而是在类似于jsfiddle的框架中提供代码。代码可以在您的问题中呈现相同的效果,但是会有一个“提琴”按钮,可以在新窗口中打开StackFiddle,并且所有代码都可以使用。然后,您可以创建小提琴来回答问题,而不是创建更新或派生和提供链接。

– ShemSeger
14年7月18日在17:55

#6 楼

将jsFiddle完全集成到StackOverflow中当然是很棒的。我不能不同意。

但是,也许直接在Stack Overflow页面中托管的更简单的东西可能会更有用?也许在概念上类似于您在Eloquent JavaScript中看到的东西将起作用。对于独立的JavaScript代码,这是一个现成的解决方案。对于需要CSS,HTML,其他库等的更复杂的问题和答案,与直接与Stacking Overflow问题和答案所依赖的第三方项目进行集成相比,直接在Stack \ Overflow内部托管的解决方案仍然更可取。 >

#7 楼

安全/滥用问题
可能的小提琴系统应遵循一些重要的设计方面:它应该是可验证的并且可以选择运行。
第一点意味着小提琴应该非常清楚其功能:代码并且实际的小提琴本身应该交织在一起,这样张贴者就无法在小提琴实际运行之前伪造可能的结果。
其次,小提琴应仅在观看小提琴的用户要求下运行。再次,这将允许用户首先确定他们是否真正要运行代码。
我认为关于这两点很重要的理由并不需要进一步说明,利用的可能性是太多了。
可能的功能
小提琴可能会将生成的最终结果预览作为方便使用的功能。可以使用无头Webkit PhantomJS在服务器端生成这些预览。严格的性能限制,API调用限制和沙箱处理显然可以降低可能的攻击媒介的风险。
提琴设计的主要问题是它是否应该补充现有的code标签或成为新标签,完全是完全独立的系统。

#8 楼

我意识到实现起来可能很复杂(而且我非常乐于为开发:P提供帮助),并且有一些问题需要解决,但是我认为这是有道理的,而且我们所有人都将从该功能中受益。我知道我会的以下是一些方法:


为了查看相关演示,不得不访问外部页面有点麻烦。我们不想离开网站。
它会(通过OP)充当寻找解决方案的催化剂,或者至少会为解决方案提供进一步的步骤,因为这种功能会驱使那些甚至没有试图隔离解决方案的人自己的代码中的问题可以解决—潜在地确定其根本问题。

有几点需要考虑:我们可能不想简单地嵌入演示的可编辑版本,而只是指向实时预览。直接允许在帖子内编辑该演示可能是个坏主意(帖子会更改内容并失去意义)。

要允许编辑,嵌入式框架可以在底部提供一个链接,例如Edit this demo。此链接可以在演示服务中创建一个fork(用于编辑的新演示)。


语法应该简单明了。也许在类似链接的markdown声明前加上特殊符号。建议的语法(我刚刚选择@来表示预览,就像它的眼睛一样):链接,如最后一点所述;例如,它必须在jsFiddle上,并且必须采用http://jsfiddle.net/[{user}/]{demoId}/embedded/的形式。这将确保演示是只读的(jsFiddle上的嵌入式模式有效地防止了编辑)。



#9 楼

嵌入的实时代码面板,您可以在JSFIDDLE,PLUNKR,JSBIN,CODEPEN等之间选择框架

,这样您就可以在问题/答案中包含实时代码示例,堆栈和服务提供商都将从中受益



| JSFIDDLE | JSBIN | CODEPEN | PLUNKR | ETC .. ||