Skip to content
master
Go to file
Code
This branch is 5 commits ahead of timnew:master.

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

README.md

hexo-codepen NPM version Dependency Status

A better version of hexo-tag-codepen with a valid HTML.

Hexo tag to embed code snippet from CodePen

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

NPM downloads

About

Hexo tag to embed code snippet from codepen.io

Resources

License

You can’t perform that action at this time.