Hexo tag to embed code snippet from codepen.io
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 5 commits ahead of timnew:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
.gitignore Initial commit Aug 17, 2014
.npmignore Simplify and bump version Apr 13, 2016
LICENSE Fixing html. Jul 24, 2017
README.md Updating info. Jul 24, 2017
index.js Adding missing quotes. Jul 23, 2017
package.json Updating package version. Jul 24, 2017


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 using npm.

$ npm install hexo-codepen --save

or using yarn

$ yarn add hexo-codepen


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%



NPM downloads