Hexo tag to embed code snippet from codepen.io
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 18 commits ahead of maliMirkec:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
.circleci Merge pull request #7 from bibixx/feature/version-test Jul 23, 2018
.markdownlint.json Change badges provider & add markdownlint Jul 25, 2018
LICENSE.md Add extension to LICENSE Jun 10, 2018
package.json Bump package version Jul 25, 2018
test-version.js Rename current test to test:version Jul 23, 2018
yarn.lock Fix deployment Jun 10, 2018



NPM version CircleCI branch Dependencies

An even better version of hexo-codepen.

Hexo tag to embed code snippet from CodePen


Install using npm.

npm install hexo-codepen-v2 --save

or using yarn

yarn add hexo-codepen-v2


Create Embedded Pen with following syntax:

{% codepen slugHash default_tabs height width userId|anonymous|anon theme %}

How to get arguments from CodePen embed

This is something generated by CodePen:

<p data-height="300" data-theme-id="33713" data-slug-hash="mKEmpj" data-default-tab="html,result" data-user="yuanchuan" data-embed-version="2" data-pen-title="Flow #1" class="codepen">See the Pen <a href="https://codepen.io/yuanchuan/pen/mKEmpj/">Flow #1</a> by yuanchuan (<a href="https://codepen.io/yuanchuan">@yuanchuan</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

You can extract required arguments:

Field Value
userId yuanchuan
slugHash mKEmpj
theme 33713
default_tabs html,result
height 300
width This value should be adjusted according to your blog theme, by default it is 100%

All of this settings except for slugHash can be set in _config.yml under codepen property.

  userId: "yuanchuan"
  theme: "33713"
  default_tabs: "js,result"
  height: 500
  width: "100%"