https://github.com/timnew/hexo-tag-codepen
Hexo tag to embed code snippet from codepen.io
https://github.com/timnew/hexo-tag-codepen
Last synced: about 1 year ago
JSON representation
Hexo tag to embed code snippet from codepen.io
- Host: GitHub
- URL: https://github.com/timnew/hexo-tag-codepen
- Owner: timnew
- License: mit
- Created: 2014-08-17T03:51:25.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2016-04-13T16:33:40.000Z (about 10 years ago)
- Last Synced: 2025-04-19T15:20:54.096Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://github.com/timnew/hexo-tag-codepen
- Size: 8.79 KB
- Stars: 14
- Watchers: 3
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
hexo-tag-codepen [![NPM version][npm-image]][npm-url] [![Dependency Status][depstat-image]][depstat-url]
================
> [Hexo] tag to embed code snippet from [CodePen]
## Install
Install using [npm][npm-url].
$ npm install hexo-tag-codepen --save
## 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`:
```html
See the Pen cGEqB by TimNew (@timnew) on CodePen.
```
You can extract required arguments:
Field | Value
-----------|--------
userId | timnew
slugHash | cGEqB
theme | 7928
defaultTab | result
height | 257
width | This value should be adjusted according to your blog theme, by default it is `100%`
## License
MIT
[![NPM downloads][npm-downloads]][npm-url]
[homepage]: https://github.com/timnew/hexo-tag-codepen
[npm-url]: https://npmjs.org/package/hexo-tag-codepen
[npm-image]: http://img.shields.io/npm/v/hexo-tag-codepen.svg?style=flat
[npm-downloads]: http://img.shields.io/npm/dm/hexo-tag-codepen.svg?style=flat
[depstat-url]: https://gemnasium.com/timnew/hexo-tag-codepen
[depstat-image]: http://img.shields.io/gemnasium/timnew/hexo-tag-codepen.svg?style=flat
[Hexo]: http://hexo.io/
[CodePen]: http://codepen.io/
[Embedded Pen]: http://blog.codepen.io/documentation/features/embedded-pens/