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.

| Option | Type | Default | Description | | -------- | ------- | --------- |--------------------------| | tabs | string | "result" | Default comma-separated string of the tabs of the codepen to display | | height | number | 300 | Default height of Pen iFrames | | width | string | "100%" | Default width of Pen iFrames | | theme | string | "dark" | Default theme for all Pens | | user | string | "" | CodePen user-id to use if only Pen-id is provided | | class | string | "codepen" | CSS classes to add to the iFrame |

Credits

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