hexo 嵌入 CodePen 或 jsFiddle

嵌入 CodePen

安装 hexo-codepen

`$ yarn add hexo-codepen`

Markdown 中语法

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

以上语法中的参数分别对应从 CodePen Embed 复制出来的html代码：

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="Maple13" data-slug-hash="xxVgPvZ" 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="Navigation">
  <span>See the Pen <a href="https://codepen.io/Maple13/pen/xxVgPvZ">
  Navigation</a> by Maple13 (<a href="https://codepen.io/Maple13">@Maple13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

示例

https://codepen.io/Maple13/pen/xxVgPvZ

嵌入 jsFiddle

Markdown 语法

{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

从jsFiddle的 Embed 中找到对应上面的参数替换即可:

<script async src="//jsfiddle.net/Maple13/9a57dvnw/1/embed/js,html,css,result/dark/"></script>

示例

https://jsfiddle.net/Maple13/9a57dvnw/1/