在hexo博客md文件中使用codepen代码

灰太狼 2023-06-15 06:42 12阅读 0赞

## 在hexo博客md文件中使用codepen代码 ##

#### 样式预览 ####

See the Pen [ WNNzeZZ][WNNzeZZ] by zshuai34 ([@zshuai34][zshuai34]) on [CodePen][].

#### 从codepen上复制的html代码 ####

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="zshuai34" data-slug-hash="WNNzeZZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="WNNzeZZ">
      <span>See the Pen <a href="https://codepen.io/zshuai34/pen/WNNzeZZ">
      WNNzeZZ</a> by zshuai34 (<a href="https://codepen.io/zshuai34">@zshuai34</a>)
      on <a href="https://codepen.io">CodePen</a>.</span>
    </p>
    <script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#### md格式 ####

{% codepen userId|anonymous|anon slugHash theme [defaultTab [height [width]]] %}

####  ####

#### 从html代码中找字段 ####

userId：data-user="zshuai34"
    anonymous：data-slug-hash="WNNzeZZ"
    theme：dark
    defaultTab： 默认展示的tab，包括 html,css,result
    height: 高
    width： 宽

{% codepen zshuai34 WNNzeZZ dark [ 400] %}

\{% codepen zshuai34 WNNzeZZ dark \[ 400\] %\}

[WNNzeZZ]: https://codepen.io/zshuai34/pen/WNNzeZZ
[zshuai34]: https://codepen.io/zshuai34
[CodePen]: https://codepen.io

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关在hexo博客md文件中使用codepen代码

在hexo博客md文件中使用codepen代码样式预览 See the Pen [ WNNzeZZ][WNNzeZZ] by zshuai34 ([@zshuai

灰太狼/ 2023年06月15日 06:42/ 0 赞/ 13 阅读

相关 Hexo 个人博客

记录一些比较好的教程，方便以后查看 [https://www.muyiio.com/2020/02/18/1/][https_www.muyiio.com_2020_02_

た入场券/ 2023年05月21日 05:58/ 0 赞/ 63 阅读

相关在github使用hexo搭建静态博客

> 效果：[https://trevor-lan.github.io/][https_trevor-lan.github.io] 安装前提安装 Hexo 之前需要先安

川长思鸟来/ 2023年03月13日 05:47/ 0 赞/ 79 阅读

相关【hexo】搭建hexo博客

准备工作 github上创建仓库用户名+ github.io 比如我的：`HappyTeemo7569.github.io` 安装环境 git

曾经终败给现在/ 2022年11月25日 10:09/ 0 赞/ 330 阅读

相关使用Hexo写博客

尽管 Hexo 支持 MarkDown，但是我们却不能像写单独的 MarkDown 文档时那样肆无忌惮。由于我们所写的文档是需要被解析为静态网页文件的，所以我们必须严格

偏执的太偏执、/ 2022年09月03日 11:28/ 0 赞/ 257 阅读

相关 Hexo写博客

hexo配置github Git Install hexo-deployer-git. $ npm install hexo-deployer-git --sav

我就是我/ 2022年07月15日 08:45/ 0 赞/ 311 阅读

相关使用github搭建Hexo博客

今天搞了一晚上搭建Hexo博客，发现异常得简单～写篇博客记录下搭建博客的框架有很多，学长用的是WordPress，今天拿了Hexo练了下手。首先这个博客框架是用node

àì夳堔傛蜴生んèń/ 2022年05月23日 07:38/ 0 赞/ 363 阅读

相关 Hexo - next主题博客

前言趁着双十一搬瓦工搞活动，入手了一台服务器，搭了个博客，以下为网站，欢迎前往 [yueluo’s Blog][yueluo_s Blog] [yueluo_

超、凢脫俗/ 2022年04月14日 04:46/ 0 赞/ 385 阅读

相关使用Hexo在GitHub上搭建私人博客

前言一般故事的开始，都要有好多准备工作，在使用Hexo之前，你要做好如下准备： 1. 注册GitHub账号 2. 电脑安装`node.js`、`npm`或`c

比眉伴天荒/ 2022年03月08日 17:58/ 0 赞/ 306 阅读

相关 Hexo博客主题优化

![标题图][1240] > `Hexo`博客主题优化添加背景图在 `themes//source/css/_custom/custom.styl` 中添加如下代

短命女/ 2021年09月17日 22:24/ 0 赞/ 485 阅读