https://github.com/kevingimbel/eleventy-plugin-codepen
Plugin that provides a custom shortcode for embedding CodePen.io pens
https://github.com/kevingimbel/eleventy-plugin-codepen
11ty-plugin eleventy-plugin
Last synced: 10 months ago
JSON representation
Plugin that provides a custom shortcode for embedding CodePen.io pens
- Host: GitHub
- URL: https://github.com/kevingimbel/eleventy-plugin-codepen
- Owner: KevinGimbel
- Created: 2021-01-23T21:10:05.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-01-23T23:01:15.000Z (over 5 years ago)
- Last Synced: 2025-07-17T15:27:19.322Z (about 1 year ago)
- Topics: 11ty-plugin, eleventy-plugin
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@kevingimbel/eleventy-plugin-codepen
- Size: 8.79 KB
- Stars: 8
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# eleventy-plugin-codepen
> Embed CodePen.io Pens into your eleventy website
- [Usage](#usage)
- [Install via npm](#install-via-npm)
- [Load the plugin in .eleventy.js](#load-the-plugin-in-eleventyjs)
- [Load the CodePen javascript library](#load-the-codepen-javascript-library)
- [Use the shortcode!](#use-the-shortcode)
- [Config Options](#config-options)
- [Overwriting options inline](#overwriting-options-inline)
- [Credits](#credits)
## Usage
### Install via npm
```bash
npm install @kevingimbel/eleventy-plugin-codepen --save
```
### Load the plugin in .eleventy.js
Include it in your .eleventy.js config file:
```js
const codepenEmbed = require("@kevingimbel/eleventy-plugin-codepen");
module.exports = (eleventyConfig) => {
eleventyConfig.addPlugin(codepenEmbed);
};
```
### Load the CodePen javascript library
The embed requires the CodePen JavaScript library to work. For convenience the library can be loaded with a shortcode. This is best done near the closing body tag and only needs to be done once!
```html
...
{% codepen_js %}