codepen学习

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/liuxiao723846/article/details/84649556

最近在很多博客上都看到这种页面

从而了解到了一个网站codepen,他是一款在线前端编辑器,类似于jsfiddle。接下来我们介绍如何在自己博客上嵌入codepen的代码。

  1. 注册codepen账号
  2. 添加一个pen,并保存
  3. 得到这个pen的的嵌入内容
  4. 把步骤3中的嵌入内容嵌入markdown文档中
  5. 发布并测试

接下来做一个示范:

1)在界面上添加一个pen:

在弹出页面上输入html、css、js,如果要引入外部js、css点击这里

2)返回到pen,点击刚刚创建的pen:

3)点击embeding:

然后选择

最后

至此,就可以吧上述代码拷贝到html或者markdown中。

 

猜你喜欢

转载自blog.csdn.net/liuxiao723846/article/details/84649556
0条评论
添加一条新回复