hexo-tag-codepen

0.2.2 • Public • Published

hexo-tag-codepen NPM version Dependency Status

Hexo tag to embed code snippet from CodePen

Install

Install using npm.

$ npm install hexo-tag-codepen --save

Usage

Create Embedded Pen with following syntax:

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

How to get arguments from CodePen embed

This is something generated by CodePen:

<p data-height="257" data-theme-id="7928" data-slug-hash="cGEqB" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/timnew/pen/cGEqB/'>cGEqB</a> by TimNew (<a href='http://codepen.io/timnew'>@timnew</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//codepen.io/assets/embed/ei.js"></script>

You can extract required arguments:

Field Value
userId timnew
slugHash cGEqB
theme 7928
defaultTab result
height 257
width This value should be adjusted according to your blog theme, by default it is 100%

License

MIT

NPM downloads

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i hexo-tag-codepen

      Weekly Downloads

      6

      Version

      0.2.2

      License

      MIT

      Last publish

      Collaborators

      • timnew