14个强大的代码编辑网站

共 2068字,需浏览 5分钟

 ·

2021-05-24 20:16

今天我将跟大家分享一些可以展示你代码的网站,它们都提供在线预览功能,所以别人可以看到你的代码如何运行。它们有时候也被称作“代码广场”。
它们不仅仅提供简单的代码展示功能,还提供很多代码协作和实际编程过程会用到的功能。
例如,当你需要别人帮你调试源代码的时候,可以使用这些网站分享你的问题代码,然后把链接分享给帮助你的人。这使得他们可以方便的查看你的源代码并提供解决方案。

1、CodePen

网址:https://codepen.io
在CodePen上,你可以演示被称作 pens 的代码。Pen 由 htmlcssjs组成。Codepen有很多方便你展示代码的功能。
例如,它支持 SASS 和 LESS 语法,可以快速的添加常用的js库如jQuery、Angular等。这里可以查看该网站上流行的Pens。

2、Liveweave

网址:https://liveweave.com/
Liveweave是一个非常棒的在线源代码编辑器。这也是网站设计师和开发者的终极游乐场,一个伟大的测试、练习和展示你代码的工具
我非常喜欢它,它可以非常方便的为你的代码添加第三方依赖。你只需点击两次就可以为你的代码添加Bootstrap、jQuery等常用的Web开发包。

3、dabblet

网址:https://dabblet.com/
这个代码展示平台更偏向于css,但它也有html和JS展示功能。一个方便的地方是它使用了-prefix-free JS库,所以你不需要担心CSS属性的前缀。

4、JS Fiddle

网址:https://jsfiddle.net/
JS Fiddle具有非常强大的JavaScript代码展示功能。它具有多个版本的开发库,如jQuery、MooTools、react。它内置代码分析工具JSHint。
它甚至允许你通过它的 echo API来模拟AJAX请求。

5、kodtest

网址:http://kodtest.com/
这个代码高亮展示网站允许你调整预览尺寸,支持移动设备和一些其他常用的屏幕设备。这个功能可以帮你快速调试响应式断点。

6、Plunker

网址:http://plnkr.co/
Plunker是一个创建、合作、分享你的网站开发思路的在线社区。它的代码编辑器具有非常多的功能。这里是一个Plunker上浏览最多的展示列表。

7、CSSDeck

网址:http://i.9iphp.com/wp-content/uploads/2015/06/demo-code-cssdeck.jpg
CSSDeck具有一个简洁的用户界面。如果你想找一个简单的展示代码的功能,这个一个很好的候选工具。
看到你代码展示的人可以在下面做出评论,不过他们需要提前注册该网站的帐号或者使用Github帐号登录。

8、code.reloado.com

网址:http://code.reloado.com/#JavaScript,html
这是另一个简单的展示你代码的工具。它提供很多js库, jQuery, Bootstrap, Prototype, Backbone, TwitterLib, Zepto等等。

9、Ideone

网址:https://ideone.com/
这个代码展示工具允许你展示服务器端代码语言(PHP、Perl等)。也可以处理像C++这样的软件编程语言。当你运行代码的时候,Ideone会为你和你的代码reviewers显示运行结果。它也会为你列出它发现的编译错误。

10、codepad

网址:http://codepad.org/
codepad是另一个展示服务器端语音的选择。它支持编程语言如PHP、Ruby、C、C++、Python等。

11、JS Bin

网址:http://jsbin.com/?html,output
JS Bin是一个集成很多功能的代码展示平台。它甚至有个控制台来让你调试和检查代码。它的控制台跟Chrome浏览器的控制台基本一样。并且JS Bin具有codecasting。

12、Tinkerbin

网址:https://tinkerbin.herokuapp.com/
Tinkerbin是一个简单的提供了你需要的所有功能的代码广场。Tinkerbin除了支持JavaScript还支持CoffeeScript,除了支持CSS还支持Sass/SCSS/Less,除了支持HTML还支持HAML。

14、SQL Fiddle

网址:http://sqlfiddle.com/
SQL Fiddle是展示你的SQL语句的平台。它可以运行 MySQL, MS SQL, PostgreSQL, Oracle Database, SQLite等。

学习更多技能

请点击下方公众号


浏览 53
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报