时间宝贵的同学分割线以内的电视购物营销时间可以跳过了

———————废话开始分割线———————

标题之所以用英文是因为我想突出下show这个行为，咳咳~
好啦，当大家写完一段代码想要发给某个人展示下效果又觉得发文件压缩包low，又或者在博客里觉得纯贴代码死活也解释的不那么直观的时候，我们就需要一些小公举（划掉/工具）来帮助我们装逼（划掉again/有效地使用技术手段) to show our code better~

那么今天我们介绍的这两款宝贝呢，经过无数人口碑的见证下，在众多公举工具中突破重围，成为了经久不衰的热销款，重要的是，只要0.00元，北上广江浙沪珠三角西藏新疆海南包邮哦~

它们就是————（此处请准备灯光舞台以及定音鼓）

`JSFiddle & CodePen`

———————-撒花分割线———————-

`★JSFiddle`

JSFiddle是我最喜爱的公举之一，主要是它界面既简洁又直观，并且打开就直接是编辑模式，还会记得你的draft(草稿)，就算写完以后发现忘记登录也没有关系，登录后它还是你的，简直不要太贴心好吗！！！并且有协作模式，邀请人进来跟你一起 边语音聊天边写代码or两个人同时写一片儿代码or在你的代码上画圈圈指指点点or在聊天框去议论你的代码or直接删了你的代码 都可以好吗啊哈哈哈哈（不要让你的仇人发现这个功能）

正常使用

JSFiddle 的基本分栏有html、css、JavaScript和result栏，在对应的栏里写对应的代码即可，注意html栏里是不用写<html><head><body>等标签的，直接写你的代码就好啦，写完点击左上角菜单栏的Run可以在result栏查看运行效果，点击Save就可以保存你的代码啦，Tidy可以一键整理你的代码哟，保存之后把浏览器地址栏的url分享给别人，别人就可以看到你的成果叻~

进阶使用

当然有童鞋很厉害对不对，原生的小demo根本满足不了对不对，写个项目不来几个框架怎么叫项目呢,JS怎么能不用es6呢，写css怎么能不用sass呢，jQ我就不用了，最近在写vue，对了normalize.css我懒得引了，能一键格式化么……

如你所愿，我心爱的小公举当然这些都能干啦~
在每个分栏的右上角都有个小小的齿轮⚙，点击就可以获取特殊技能啦
例如:
点击即可切换sass模式，并可一键点normalize清除掉浏览器默认样式，是不是很方便！
再比如:
可以选择哪种JavaScript语言模式，以及点loadType选择什么加载，又或是给框架添加属性，当然，我觉得最强大的还是这个framework&extensions

里面预置了常用的框架和拓展库，并且从A-Z排序，并标明版本号，啊，真是太sweet了！

当然你也可能是骨灰级玩家，预置的库怎么能够你用呢，那么不要着急
菜单栏左侧的External Resources

可以帮助你加载想要的cdn资源，只要把URL写上，点个加号，就可以愉快地使用你想要的库啦😎

协作使用

哼哼哼~嫌一个人写代码太寂寞么,赶快开启协作模式吧！

点击顶部菜单栏的Collaborate,之后右下角会出现蓝色的小面板，依次是头像设置、邀请链接、语音通话和在线聊天，啊~我觉得这些已经够用了，大家还要啥自行车🚲啊~

嵌入使用

当然也有童鞋说，既然这个这么酷，我要把它引入到我的页面/博客里，那么，JSFiddle也有一键生成嵌入代码的功能，非常方便哟~

点击embed嵌入，可以选择展现哪些tab页，例如不需要css就不勾选就可以了，下面是一些字体颜色的设置，最最重要的，是最下面的embed code,把那段代码复制下来，放在你的html里或者md文件里，就可以立即显示你的JSFiddle了~
效果如下：

好！快说！它是不是你最爱的小公举？！

———————-公举分割线———————-

`★CodePen`

CodePen同样是一枚傲娇的公举，在保持了基本的在线代码编辑的功能之外，它更多情况下是大神用来展示自己newbee作品的集结地，里面有很多令人叹为观止的纯CSS作品，大家赶快去围观吧！

点击newpen就可以创建一个自己的小项目,同时也可以点击别人的项目去likeandfork,同jsfiddle一样，也会有一些语言的预处理的设置以及框架的引用，使用方法大同小异，大家尝试就好啦,底部的菜单栏也是一些方便大家写代码的设置，可以根据个人喜好用起来哦~