支持分享的在线代码编辑器推荐

博客中往往加一些在线代码编辑器进行代码DEMO的展示,往往有很好的效果。 下面就推荐几款支持分享的在线代码编辑器。

JSFiddle

https://jsfiddle.net/

国内访问慢或资源加载不了,建议使用代理。

高级特性:

  • 支持从预置模板生成代码集,快速开始
  • 支持实时合作
  • 支持页面嵌入,可设置黑白主题色或自定义颜色
  • 每次保存都会产生历史版本
  • CSS支持SCSS,样式重置可选择使用Normalize.css
  • JS支持CoffeeScript,Babel JSX,Type Script,Vue,React,Preact
  • JS内置可选的常用框架与扩展,可定义加载时机,设置<script>标签属性attribute
  • 外链支持从CDNJS搜索名称来加入对应资源
  • 支持模拟异步请求
  • 可设置界面布局、代码提示(beta)、自动运行、自动保存、高亮匹配标签、快捷键映射方案(Sublime、vim、Emacs)

JS Bin

http://jsbin.com/

高级特性:

  • 将代码集保存到GitHub Gist
  • 将代码集保存为模板
  • 自动保存,可设置自动运行
  • 可打开单独窗口运行代码集
  • ctrl+s保存快照,相当于历史版本,通过Open bin…来选择
  • 支持展示Console窗口
  • HTML支持Markdown,Jade,并提供转换为HTML功能
  • CSS支持Less,Myth,Sass,SCSS,Stylus,并提供转换为CSS功能
  • JS支持ES6 / Babel,JSX,CoffeeScript,Traceur,TypeScript,Processing,LiveScript,ClojureScript,并提供转换为原生JavaScript功能
  • JS内置可选的常用框架与扩展
  • 支持页面嵌入,可选择快照还是最新版本,可选择编辑视图或只有结果界面
  • 支持键盘快捷键,支持部分Sumlime快捷键

升级为付费用户:

  • 上传本地资源
  • 创建私有代码集
  • 自定义嵌入样式
  • 同步到Dropbox
  • 个性域名

codepen

https://codepen.io/

平台特色

  • 支持用markdown语法创建文章,文章可嵌入代码集
  • 免费用户可创建1个项目,包含10个文件
  • 支持创建专辑

高级特性:

  • 将代码集保存为模板
  • 将代码集保存到GitHub Gist
  • 将代码集导出到zip包
  • 可打开单独窗口运行代码
  • 提供一些开箱即用的样式资源
  • 可对代码集进行评论
  • 可设置自动保存、自动运行
  • 支持页面嵌入,可设置黑白主题色、点击后加载,升级付费用户后可设置代码可编辑
  • 保存不产生历史版本,每次访问都是最新代码
  • HTML支持Haml,Markdown,Slim,Pug
  • CSS支持Less,PostCSS,Sass,SCSS,Stylus,样式重置可选择使用Normalize.css,Reset.css,前缀生成可选择Autoprefixer,Prefixfree
  • JS支持Babel,TypeScript,CoffeeScript,LiveScript
  • 支持键盘快捷键

升级为付费用户/团队:

  • 创建私有代码集
  • 自定义嵌入主题样式
  • 更多项目更多文件
  • 项目可部署
  • 合作模式
  • 专家模式
  • 资源文件托管

codesandbox

https://codesandbox.io/

codesandbox更新像是在线IDE,可配置首选项,与GitHub、ZEIT集成,以项目为单位,免费用户可创建50个项目。

高级特性:

  • 支持从预置模板生成项目,快速开始
  • 支持添加npm依赖包
  • 支持上传文件
  • 支持编写配置文件package.json,.babelrc,.prettierrc,sandbox.config.json
  • 支持实时合作
  • 将项目导出到zip包
  • 可打开单独窗口运行代码
  • 支持项目分享
  • 保存不产生历史版本,每次访问都是最新代码

升级为付费用户:

  • 团队权限限制解除
  • 创建私有代码集
  • 无限量代码集
  • 静态文件托管从免费20Mb增加到500Mb
  • codepen 只能分享最新代码,要比较代码变更情况,需要先Fork再编辑。

总结

codesandbox 接近一个完整的IDE,功能强大,可创建公开的多文件项目,适合用在各种框架配置教程中。

JSFiddle、JS Bin 更适合用于在线分享、学习、制作demo、测试代码。

JS Bin 支持代码下载,保存到Gist。

JSFiddle 提供了一些开箱即用的功能,无需复杂的配置,支持代码提示。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券