如何在个人博客中插入Jsbin或者jsfiddle代码
来源:互联网 发布:c语言如何输入n个整数 编辑:程序博客网 时间:2024/06/05 09:04
前言
也许在大家浏览大牛们博客时经常会看到在他们的个人博客经常会有比较炫酷的在线代码演示。例如:
实现原理
通过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写博客的人而言却是必不可少的一个小技能,建议大家在自己的博客中也可以尝试一下。
1 0
- 如何在个人博客中插入Jsbin或者jsfiddle代码
- JSRUN 对比 jsfiddle,jsbin,codepen
- 在线JS代码调试工具JSFiddle和JSBin、菜鸟在线编辑器
- 测试在csdn博客中插入代码
- ITeye如何在博客中插入图片
- 如何在博客中插入公式
- 如何在CSDN博客中插入图片
- 如何在CSDN博客中插入图片
- jsbin-jsfiddle-or-codepen-which-one-to-use-and-why
- 如何在csdn中插入代码
- 如何在word中插入代码
- 测试如何在博客中加入代码
- 成功在CSDN个人博客插入视频。。。。。
- 测试一下在CSDN博客中插入代码
- 如何在博客或论坛中插入公式
- 求助:如何在博客中快速插入图片
- 手把手教大家如何在CSDN博客中插入图片
- 关于在CSDN中写博客时如何插入图片
- 八、分组函数/聚合函数/双行处理函数
- 关于zxing扫码界面的优化
- 148. Sort List
- 521. Longest Uncommon Subsequence I
- 利用Python解析Excel文件
- 如何在个人博客中插入Jsbin或者jsfiddle代码
- 快速排序
- ubuntu下解决端口被占用问题
- Android 性能:避免在Android上使用ENUM
- git 指令
- 计数排序
- Mysql索引注意事项
- const的各种用法
- 史上最简单的SpringCloud教程 | 第二篇: 服务消费者(rest+ribbon)