Eleventy plugin for efficient CodePen embeds

Kumar Abhishek's avatar Kumar Abhishek 1 min read 🎈

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 Codepen embed Javascript finally creates an <iframe> anyway!

I wanted a more efficient solution for my blog by directly embedding the Pen’s iFrame; therefore I wrote 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"
});
};

⚠ You’re only allowed one module.exports in your configuration file! If one already exists, copy the content of the above into your existing module.exports function.

STEP 3 – Use it in your templates like this:

{% CodePen "https://codepen.io/abhiweb/pen/wvzNaQM", "result", "220" %}

Config Options §

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

OptionTypeDefaultDescription
tabsstring“result”Default comma-separated string of the tabs of the codepen to display
heightnumber300Default height of Pen iFrames
widthstring“100%”Default width of Pen iFrames
themestring“dark”Default theme for all Pens
userstring“”CodePen user-id to use if only Pen-id is provided
classstring“codepen”CSS classes to add to the iFrame

Demo §

Check it out live in my other post A Regular Expression to filter invalid names

All Notes Suggest Edit