如何在个人博客中插入Jsbin或者jsfiddle代码

前言

也许在大家浏览大牛们博客时经常会看到在他们的个人博客经常会有比较炫酷的在线代码演示。例如：

width="100%" height="500" src="//jsfiddle.net/Aflier/pehfos3e/embedded/result,html,css" allowfullscreen="allowfullscreen">

实现原理

通过iframe创建一个内联框架来实现上面效果

具体步骤

1、进入jsbin或者jsfiddle官网，注册并登录。

2、编写自己所需要分享的代码，如下图：

3、点击Embed按钮 并复制embed code代码

4、把复制的代码插入到个人博客中：

如此一来我们便可以看到本文开始时代码演示的效果了。

小技巧

最后的result,js,html,css为iframe中tab的显示的顺序，或者你不想显示html,css,你就可以直接写成

http://jsfiddle.net/Aflier/pehfos3e/embedded/result,

实现方法很简单，但对于一个喜欢用MarkDown写博客的人而言却是必不可少的一个小技能，建议大家在自己的博客中也可以尝试一下。