Direct Links:
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" });
};
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.
| 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 |
Demo §
Check it out live in my other post A Regular Expression to filter invalid names
Top comments (0)