支持分享的在线代码编辑器推荐
author: @TiffanysBear
博客中往往加一些在线代码编辑器进行代码DEMO的展示，往往有很好的效果。
下面就推荐几款支持分享的在线代码编辑器。
JSFiddle
国内访问慢或资源加载不了，建议使用代理。
高级特性：
- 支持从预置模板生成代码集，快速开始
- 支持实时合作
- 支持页面嵌入，可设置黑白主题色或自定义颜色
- 每次保存都会产生历史版本
- CSS支持SCSS，样式重置可选择使用Normalize.css
- JS支持CoffeeScript，Babel JSX，Type Script，Vue，React，Preact
- JS内置可选的常用框架与扩展，可定义加载时机，设置
<script>标签属性attribute - 外链支持从CDNJS搜索名称来加入对应资源
- 支持模拟异步请求
- 可设置界面布局、代码提示（beta）、自动运行、自动保存、高亮匹配标签、快捷键映射方案（Sublime、vim、Emacs）
JS Bin
高级特性：
- 将代码集保存到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
平台特色
- 支持用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
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 提供了一些开箱即用的功能，无需复杂的配置，支持代码提示。