如何在博客中插入jsfiddle的代码
1、进入官网:https://jsfiddle.net/
可以看到如下界面,顶端的控制按钮包括:保存,运行,代码格式化等;

2、将html、css、js分别写在指定的位置当中,最后一个框result是显示效果的;
3、代码编辑完之后保存,会得到上面所写代码的链接,把这个链接复制下来,后面插入博客就用它
4、在博文中插入以下代码:
<iframe
style="width: 100%; height: 300px"
src=" https://jsfiddle.net/mxaeoaxb/embedded/result,html,css,js/">
</iframe>
效果:
其中https://jsfiddle.net/mxaeoaxb就是上面提到的代码链接,result,js,html,css指的是排列顺序
可参考网站:http://doc.jsfiddle.net/
如何在博客中插入jsfiddle的代码的更多相关文章
- 使用Scribefire在博客中插入语法高亮
效果如下, 文字1 int cool void main() { cout<<"hello world!"<<endl } 文字2 经过一番折腾,终于搞定了 ...
- 使用Scribefire在博客中插入语法高亮 II
效果如下, 这是我们在Scribefire中添加的code按钮,单击此按钮,则会出现 在codeHere中直接输入代码就可以了. 查看html 可以看到,其中已经添加了<pre>标签. 下 ...
- 手把手教你在CSDN博客中插入图片之剑走偏锋系列
1.在博客园注册账号.你没有看错,就是博客园,在图像上传方面博客园比CSDN这个垃圾强太多了. 2.在博客园进入随笔撰写编辑模块,点击上传图像按钮(点最黄的那个,别点错了). 3.弹出如下窗口 ,点击 ...
- Hexo博客中插入 Chart 动态图表
该文基本(全部)来自于chatjs中文文档 由于使用pjax,导致页面需要二次刷新才会显示表格,故引入了自动刷新的JS,但这样会导致回退标签失效 背景 今天在谷歌上逛博客时,突然发现shen-yu大佬 ...
- hexo博客如何插入图片
Hexo是一个静态的博客网站生成器,生成一个博客只需要分分钟的时间就能搞定. Hexo的博文是支持Markdown格式的,发表一篇文章只需要简简单单的几个命令. hexo new '文章'就会生成一个 ...
- 带图片的word快速插入到博客中
最近在博客中写文章的时候,最烦的就是将word文档整体传到博客中,不能一次把图片粘贴上去,再次去添加图片的时候要截图还要找对位置才可上传,偶尔的机会在网上看到有人这么处理,挺好用的,这里我也做个备注. ...
- 怎样将word中的图片插入到CSDN博客中
目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...
- 如何在博客中使用SublimeText风格的代码高亮样式
因为觉得博客园自带的代码高亮样式很单一,不符合作为前端的我的审美习惯,于是下定决心要想办法折腾出一个方法来应用上另外一套代码高亮样式. 虽然探索的过程是很痛苦的,但最后还是成功了,但也不枉付出的那些努 ...
- 借用Snippet插件美化博客中的代码
书写博客,难免要贴出代码.然而直接贴出代码,则不美观.于是,应运而生出现了很多代码美化的插件.其中比较有名的是Syntax Highlighting插件. 笔者在网上翻阅的时候发现了Snippet ...
随机推荐
- 【转】不是技术牛人,如何拿到国内IT巨头的Offer
不久前,byvoid面阿里星计划的面试结果截图泄漏,引起无数IT屌丝的羡慕敬仰.看看这些牛人,NOI金牌,开源社区名人,三年级开始写Basic...在跪拜之余我们不禁要想,和这些牛人比,作为绝大部分技 ...
- 初始化脚本(Os_Init_Optimization.sh)
#!/bin/bash #解压缩startup.tar.gz包 cd /tmp && tar -zxf startup.tar.gz #初始化YUM源 rm -rf /etc/yum. ...
- Java语言概述
1.1 基础知识 ·第一代语言 打孔机--纯机器语言 ·第二代语言 汇编 ·第三代语言 C.Pascal.Fortran面向过程的语言 C++面向过程/面向对象 Java跨平台的纯面向对象的语言 .N ...
- SAP 增强-出口选找方法-全部
■ SAP 中如何寻找增强 方法一:利用TCODE寻找增强(第二代的增强) 执行一个程序(源代码后附),在选择屏幕处输入你所需要增强的程序TCODE,执行後,就会出现一个列表,那里就有关于如何增强这个 ...
- 期望DP
BZOJ 1415 #include <iostream> #include <cstring> #include <algorithm> #include < ...
- Android SnackBar使用方法
SnackBar是 Android Support Library 22.2.0 里面新增提供的一个控件,类似于Toast的使用 使用方法 Snackbar snackbar = Snackbar.m ...
- HDU 5360 (贪心)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5360 题意:告诉你n个区间[ l[i],r[i] ],然后让你排序,必须左区间不大于它前边的总区间个数 ...
- Grand Central Dispatch(GCD)
GCD GCD是异步执行任务的技术之一. GCD使用很简洁的记述方法,实现了极为复杂繁琐的多线程编程. dispatch_async(queue, ^{ //长时间处理 ...
- 图片标签img中,为什么使用alt属性没用
alt属性 alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的.所以alt属性的本意是用于替换图像,而不是为图像提供额外说明的,但是,在ie浏览器中,alt属性会变成文字提示,这本身是一 ...
- poj 1363
这是一道数据结构的问题,用到了栈的知识.题目大意讲的是每一次有N辆车从A到B,但是要将车辆的顺序重新排列,可以通过中转站C来辅助排列,但是C符合先进后出的原则,这一点和栈的特性相同. 整个重新排序的过 ...