eleventy-plugin-codepen

Embed CodePen.io Pens into your eleventy website

• Usage
  • Install via npm
  • Load the plugin in .eleventy.js
  • Load the CodePen javascript library
  • Use the shortcode!
• Config Options
  • Overwriting options inline
• Credits

Usage

Install via npm

npm install @kevingimbel/eleventy-plugin-codepen --save

Load the plugin in .eleventy.js

Include it in your .eleventy.js config file:

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!

...
{% codepen_js %}
</body>
</html>

Use the shortcode!

The only required arguments is the CodePen full URL of the Pen or the "slug". This is the random letters in the URL, for example the Pen https://codepen.io/kevingimbel/pen/LXxoEL has the slug "LXxoEL".

It is up to you what you want to specify, although the full URL may be more future proof (e.g. if you want to replace this Plugin with a plugin that prints the URL instead of creating an embed.).

{% codepen "https://codepen.io/kevingimbel/pen/LXxoEL" %}

Config Options

All of these can be set in the .eleventy.js config as well as inline (see below).

Option	Type	Default	Comment
height	Number	256	The height of the embed iframe
theme	String	dark	Free codepen users can use light or dark, CodePen Pro users may use additional themes
tabs	String	result	possible values: html, css, js, result. Combine with comma like html,result
user	String	Captain Anonymous	name of the user who created the pen
title	String	Unknown Pen	The title of the pen, used when embed can't be rendered
preview	Boolean	true	If true, shows a "run pen" button instead of automatically running code
editable	Boolean	false	Makes pen editable, requires CodePen Pro

Overwriting options inline

All options can also be overwritten "inline" when the shortcode is used. Because 11ty doesn't support names parameters, and there are quite a lot of options, all options are specified in one string.

The config string is split at each semicolon (;) and each colon (:) to create key-value pairs, as shown in the following table

Option String	Parsed object
tabs:html,result;title:single-div Link from Legend of Zelda	{tabs: "html,result", title: "single-div Link from Legend of Zelda" }

Setting all options looks like:

"height:256;theme:dark;tabs:result;user:Captain Anonymous;title:Unknown Pen;preview: true;editable: false"

Credits

• Huge thanks to CodePen.io for providing a great embed script. This plugin is only a wrapper around the existing functionality.