Skip to content

bibixx/hexo-tag-codepen

 
 

Repository files navigation

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

About

Hexo tag to embed code snippet from codepen.io

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%