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

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

样式预览

See the Pen WNNzeZZ by 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] %}