如何在博客中插入jsfiddle代码

  之前看到有些博文里可以把HTML、CSS、JavaScript代码和运行结果直接显示在一个iframe中，就觉得这个方式挺有用的。首先是不占据多少文章地方，主要是比较清晰，代码和结果一目了然。今天特地去找了一下是利用什么来实现的。网上搜了一会，大概明白了如何实现，下面是预览效果(请耐心等待一下，可能加载有点慢)：

  下面来说说实现的步骤：

进入jsfiddle官网注册jsfiddle账号

  然后可以看到如下页面：

将html、css、js分别写在指定的位置当中，最后一个框result是显示效果的；

依次点击Run、Save，然后在embed中可以得到EMBED CODE,这里点击右边的Perfer iframe？，复制代码到你的markdown中。在Embed的TABS中可以勾选你想要显示的内容。然后在你复制的代码中也可以进行编辑：

<iframe width="100%" height="400" src="//jsfiddle.net/akaziki/9msfwc6w/embedded/html,css,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

  jsfiddle.net/akaziki/9msfwc6w是你的代码链接，html,css,result是要显示的内容和顺序。

可参考网站：http://doc.jsfiddle.net/