@manustays/eleventy-plugin-codepen-iframe v2.0.1

Eleventy Plugin to Embed CodePen.io Pens (using iFrame)

Embed CodePen.io Pens into your 11ty website by using a ShortCode. It directly embeds an iFrame for efficiency (without loading CodePen's Javascript).

Yet another 11ty plugin to embed CodePens into you pages. The other plugins that I had seen use CodePen's preferred Javascript based embeds. It requires loading an external Javascript (though, a small one) into your page. The Javascript finally creates an <iframe> anyway!

I wanted a more efficient solution for my blog by directly embedding the Pen's iFrame; therefore this plugin.

Usage

STEP 1: Install the plugin:

npm install --save-dev @manustays/eleventy-plugin-codepen-iframe

STEP 2: Include it in your .eleventy.js config file:

const embedCodePen = require("@manustays/eleventy-plugin-codepen-iframe");

module.exports = (eleventyConfig) => {
	eleventyConfig.addPlugin(embedCodePen, {
		tabs: "js,result",
		user: "manustays"
	});
};

STEP 3 – Use it in your templates:

{% CodePen "pen-url" %}

Config Options

These options set the default values for embedded Pens. They can be overridden while embedding individual Pens.

Credits

Huge shout-out to the awesome 11ty community for inspirations and learning and to CodePen.io for makign this plugin possible!