Skip to content

maliMirkec/hexo-tag-codepen

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
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
 
 
 
 
 
 
 
 
 
 
 
 

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

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%