hexo-codepen
v0.1.1
Published
Hexo tag to embed code snippet from codepen.io
Downloads
13
Maintainers
Readme
hexo-codepen
A better version of hexo-tag-codepen with a valid HTML.
Install
Install using npm.
$ npm install hexo-codepen --save
or using yarn
$ yarn add hexo-codepen
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="265" data-theme-id="dark" data-slug-hash="bgjKKE" data-default-tab="css,result" data-user="CiTA" data-embed-version="2" data-pen-title="CSS sidebar toggle" class="codepen">See the Pen <a href="https://codepen.io/CiTA/pen/bgjKKE/">CSS sidebar toggle</a> by Silvestar Bistrović (<a href="https://codepen.io/CiTA">@CiTA</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
You can extract required arguments:
Field | Value
-----------|--------
userId | CiTA
slugHash | bgjKKE
theme | dark
defaultTab | css,result
height | 265
width | This value should be adjusted according to your blog theme, by default it is 100%
License
MIT