❤
npm
Sign UpSign In

hexo-codepen-v2

0.2.3 • Public • Published

hexo-codepen

NPM version CircleCI branch Dependencies

An even better version of hexo-codepen.

Hexo tag to embed code snippet from CodePen

Install

Install using npm.

npm install hexo-codepen-v2 --save

or using yarn

yarn add hexo-codepen-v2

Usage

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.

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

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i hexo-codepen-v2

Repository

github.com/bibixx/hexo-tag-codepen

Homepage

github.com/bibixx/hexo-tag-codepen

Weekly Downloads

4

Version

0.2.3

License

MIT

Unpacked Size

26.4 kB

Total Files

8

Last publish

Collaborators

  • bibixx
Try on RunKit
Report malware