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

博客中往往加一些在线代码编辑器进行代码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 提供了一些开箱即用的功能，无需复杂的配置，支持代码提示。